3. Utiliser la délégation d’événements

le 29 Octobre 2012, par Stéphane

La délégation d’événements permet de ne pas surcharger la mémoire du navigateur en instanciant un seul écouteur pour plusieurs éléments du DOM.

Exemple :

L’élément du DOM dont l’ID est t est déclaré comme le délégué. Il intercèpte les événements de tous ses fils.

(…)
<style type="text/css">
  #t { border: 1px solid red }
  #t1 { background-color: pink; }
</style>
<script type="text/javascript">
function modifyText(new_text) {
  var t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;    
}
function load() { 
  var el = document.getElementById("t"); 
  el.addEventListener("click", function() { 
    modifyText("four")}, false); }
</script> 
</head> 
<body onload="load();"> 
<table id="t"> 
<tr><td id="t1">one</td></tr> 
<tr><td id="t2">two</td></tr> 
</table>
(…)