RWEB 0044 Utiliser la délégation d'évènements
Ref. Version →
Ref. BP →
GreenIT
41
2.0.0
0046
3.0.0
0044
4.0.0
0044
Description
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 (Document Object Model).
Exemple
L’élément du DOM, dont l’ID est “t”, est déclaré comme le délégué. Il intercepte les événements de tous ses fils.
<head>
// ...
<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"><button type="button">one</button></td></tr>
<tr><td id="t2"><button type="button">two</button></td></tr>
</table>
<!-- ... -->
</body>Principe de validation
| Le nombre | est inférieur ou égal à |
|---|---|
| d'écoutes (listeners) d'un même événement sur plusieurs éléments HTML, faisant partie d'un même groupe, sans utiliser la délégation d'événements | 0 |