Détecte l'événement myEvent et exécute ToDo() lorsque myEvent est déclenché
Syntaxe elt.addEventListener(String myEvent, Function ToDo)
Compatible tous navigateurs
Oui
Oui
Oui
Oui
Oui
Oui
Oui
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.
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.
SELECT *, DATE_FORMAT(dt_insert, '%d/%m/%Y %H:%i' ) AS jour_insert, DATE_FORMAT(dt_maj, '%d/%m/%Y %H:%i' ) AS jour_maj FROM js_reference ORDER BY IDfather, name
SELECT * FROM js_navigateur ORDER BY ordre
SELECT * FROM js_version ORDER BY ID
SELECT * FROM js_reference WHERE phpfile="htmlelement.addEventListener"
UPDATE js_reference SET nb_visi=nb_visi+1, nb_visi_delai=nb_visi_delai+1 WHERE ID='273'
SELECT * FROM js_navigateur ORDER BY ordre
SELECT js_equivalent_ressource.*, js_equivalent_language.language, js_equivalent_language.favico
FROM js_equivalent_ressource, js_equivalent_language
WHERE js_equivalent_ressource.idLanguage = js_equivalent_language.id
AND js_equivalent_ressource.etat=1
AND js_equivalent_language.etat=1
AND js_equivalent_ressource.typeof='REF'
AND js_equivalent_ressource.idRessource="273"
SELECT * FROM js_exemple WHERE ID='273' ORDER BY ordre
SELECT * FROM js_url WHERE ID='273' ORDER BY ordre
SELECT * FROM js_url WHERE ID='269' ORDER BY ordre
Attache un gestionnaire d'événement à l'élément.
En savoir plus
