Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:js:dom [2023/03/30 20:36] – [createElement & appendChild] jcheron
+++ web:js:dom [2023/03/31 03:06] (Version actuelle) – [Suppression de Listener] jcheron
@@ Ligne 236: / Ligne 236: @@
 ==== Listener ====
+La méthode **addEventListener()** attache un gestionnaire d'événements à l'élément spécifié.
+<sxh html>
+<button id="bt-alert">Click me!</button>
+<script>
+document.getElementById('bt-alert').addEventListener("click", function(){ alert("Hello World!"); });
+</script>
+</sxh>
+<html><div class="imageB">
+<button id="bt-alert">Click me!</button>
+<script>
+document.getElementById('bt-alert').addEventListener('click', function(){ alert('Hello World!'); });
+</script>
+</div></html>
+Il est possible d'ajouter plusieurs gestionnaires sur le même évènement d'un élément.
+==== Suppression de Listener ====
+<sxh html>
+<button id="bt-alert-2">Click me...</button>
+<script>
+const message=function(){ alert('Hello World!'); };
+const bt=document.getElementById('bt-alert-2');
+bt.addEventListener('click', message);
+bt.removeEventListener('click', message);
+</script>
+</sxh>
+<html><div class="imageB">
+<button id="bt-alert-2">Click me...</button>
+<script>
+const message=function(){ alert('Hello World!'); };
+const bt=document.getElementById('bt-alert-2');
+bt.addEventListener('click', message);
+bt.removeEventListener('click', message);
+</script>
+</div></html>