Incompréhension sur événement

Bonjour à tous,

Je vous solicite car je suis face a un mystère que je ne comprend pas.
Voici le code exemple
HTML

Code:

---

1 2 3

<div id="parent"> <div id="enfant">Enfant</div> </div>

---

Le js

Code:

---

1 2 3 4 5 6 7 8

var enfant = document.getElementById('enfant'); var parent = document.getElementById('parent');   enfant.addEventListener('click', function(){ alert(); }, false);   parent.innerHTML+='<div>ajout</div>';

---

Question : Pourquoi un innerHTML sur le parent fait sauté l'event sur l'enfant.
Je ne cherche pas de solutions, je cherche à comprendre pourquoi (spécificité du dom, des events, ....).
Merci par avance aux gens se penchant sur le problème.

Le code sur CodePen => http://codepen.io/anon/pen/PqEjXK

jour

quand on fait

Code:

---

parent.innerHTML+='<div>ajout</div>';

---

sa revient au meme que

Code:

---

parent.innerHTML=parent.innerHTML+'<div>ajout</div>';

---

tu copie le html du parent sans les evenements que tu ré-inserre avec le html suplementaire en écrasant l'ancien html

en gros tu remplace le html et les evenements associer par du html sans evenements

c'est bien se que je pensait, merci pour cette réponse rapide et éxplicite.