web:js:dom

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:js:dom [2023/03/30 20:35] – [createElement & appendChild] jcheronweb:js:dom [2023/03/31 03:06] (Version actuelle) – [Suppression de Listener] jcheron
Ligne 219: Ligne 219:
 const h3=document.createElement("h3"); const h3=document.createElement("h3");
 h3.innerHTML="Hello world!"; h3.innerHTML="Hello world!";
-document.getElemenById('append').appendChild(h3);+document.getElementById('append').appendChild(h3);
 </script> </script>
 </sxh> </sxh>
Ligne 227: Ligne 227:
 <p id="append">Ancien contenu...</p> <p id="append">Ancien contenu...</p>
 <script> <script>
-const h3=document.createElement("p");+const h3=document.createElement("h3");
 h3.innerHTML="Hello world!"; h3.innerHTML="Hello world!";
-document.getElemenById('append').appendChild(h3);+document.getElementById('append').appendChild(h3);
 </script> </script>
 </div> </div>
Ligne 236: Ligne 236:
  
 ==== Listener ==== ==== 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>
  
  
  • web/js/dom.1680201355.txt.gz
  • Dernière modification : il y a 2 ans
  • de jcheron