Manipulando innerHTML remove o manipulador de events de um elemento filho?

Eu tenho essa demonstração muito simples:

function foo() { alert('Works!'); } var inp = document.createElement('input'); inp.onblur = foo; document.body.appendChild(inp); 

Veja aqui: http://jsfiddle.net/A7aPA/

Como você pode ver, isso funciona. (Clique na input, clique em algum outro lugar e um alerta será exibido.)

No entanto, se eu adicionar esta linha ao código JavaScript:

 document.body.innerHTML += '
';

em seguida, o manipulador de desfoque pára de funcionar (e nenhum erro é lançado em breve).

Veja aqui: http://jsfiddle.net/A7aPA/1/

Por que é que?

Sim, quando você faz:

 document.body.innerHTML += '
';

Você está realmente fazendo:

 document.body.innerHTML = (document.body.innerHTML + '
');

Então você está destruindo e recriando todo o conteúdo.

Modificar innerHTML faz com que o conteúdo seja novamente analisado e os nós DOM sejam recriados, perdendo os manipuladores que você anexou. Anexar elementos como no primeiro exemplo não causa esse comportamento, portanto, nenhuma nova análise deve ocorrer, pois você modifica a tree DOM explicitamente.

Outra boa maneira de lidar com isso é usar insertAdjacentHTML () . Por exemplo:

 document.body.insertAdjacentHTML('beforeend', '
')