Retourner à la page d'accueil de TJS

Méthode : HTMLElement.addEventListener()

Détecte l'événement myEvent et exécute ToDo() lorsque myEvent est déclenché

Syntaxe
elt.addEventListener(String myEvent, Function ToDo)

Compatibilité navigateurs

Description
Créé un détecteur (Listener) de l'événement myEvent sur l'objet elt et lance la fonction ToDo() dès que l'événement est déclenché.
Permet de créer des événements par programmation
Un événement créé peut être supprimé par removeEventListener().

La chaîne myEvent est une chaîne précise facile à trouver. Tous les attributs HTML onMyEvent deviennent la chaîne MyEvent : onload devient donc load.

Les événements sont de type Event


Equivalent dans d'autres langages
Equivalent en jQuery à $.on() : Attache un gestionnaire d'événement à l'élément.

Exemple 1 : Equivalent onclick et click
Code source
<style type="text/css">
.myDiv {cursor:pointer;}
.divBlack{background-color:#000;  color:#fff;}
</style>
<div id="myDiv1" class="myDiv" onclick="black1(this)">Mon div 1 : L'événement click est déclaré dans le code HTML par onclick</div>
<script>
function black1(o) {
 o.className="divBlack";
}
</script>

<div id="myDiv2" class="myDiv">Mon div 2 : l'événement click est ajouté par addEventListener("click")</div>
<script>
document.getElementById("myDiv2").addEventListener("click", black2);
function black2(evenement) {
 evenement.target.className="divBlack";
}
</script>
<p>Cliquez sur les DIV pour déclencher l'événement</p>

Résultat
Mon div 1 : L'événement click est déclaré dans le code HTML par onclick
Mon div 2 : l'événement click est ajouté par addEventListener("click")

Cliquez sur les DIV pour déclencher l'événement

Emulation de la console
Explication
Gestion de click dans les attributs dans myDiv1 ou par programmation sur myDiv2.

Page en rapport
Introduction au DHTML
Page mise à jour le

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 14 novembre 2019

Version papier à 29€90
Format électronique à 22€99.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...
Le 01/04/2020 14:11:45 sur php7 en 40.67 ms