JavaScript utilise EventListener pour fonctionner sur les connaissances HTML DOM

Méthode addEventListener()
Exemple
L'événement d'écoute est déclenché lorsque l'utilisateur clique sur le bouton :

document.getElementById("myBtn").addEventListener("click", displayDate);

Copier après la connexion

La méthode addEventListener() est utilisée pour ajouter un gestionnaire d'événements à l'élément spécifié.
Le gestionnaire d'événements ajouté par la méthode addEventListener() n'écrasera pas le gestionnaire d'événements existant.
Vous pouvez ajouter plusieurs gestionnaires d'événements à un élément.
Vous pouvez ajouter plusieurs gestionnaires d'événements du même type au même élément, comme deux événements « clic ».
Vous pouvez ajouter des écouteurs d'événements à n'importe quel objet DOM, pas seulement aux éléments HTML. Tel que : objet fenêtre.
La méthode addEventListener() facilite le contrôle des événements (bullage et capture).
Lorsque vous utilisez la méthode addEventListener(), le JavaScript est séparé du balisage HTML, ce qui le rend plus lisible, et vous pouvez ajouter des écouteurs d'événements sans contrôler le balisage HTML.
Vous pouvez utiliser la méthode removeEventListener() pour supprimer les écouteurs d'événements.
Grammaire

element.addEventListener(event, function, useCapture);

Copier après la connexion

Le premier paramètre est le type d'événement (tel que "clic" ou "mousedown").
Le deuxième paramètre est la fonction appelée après le déclenchement de l'événement.
Le troisième paramètre est une valeur booléenne utilisée pour décrire si l'événement bouillonne ou capture. Ce paramètre est facultatif.
Remarque : N'utilisez pas le préfixe « on ». Par exemple, utilisez « clic » au lieu de « onclick ».

Ajouter un gestionnaire d'événements à l'élément d'origine
Exemple
"Hello World!" apparaît lorsque l'utilisateur clique sur l'élément :

element.addEventListener("click", function(){ alert("Hello World!"); });

Copier après la connexion

Vous pouvez utiliser des noms de fonctions pour référencer des fonctions externes :
Exemple
"Hello World!" apparaît lorsque l'utilisateur clique sur l'élément :

element.addEventListener("click", myFunction);

function myFunction() {
 alert ("Hello World!");
}

Copier après la connexion

Ajouter plusieurs gestionnaires d'événements au même élément
La méthode addEventListener() permet d'ajouter plusieurs événements au même élément sans écraser les événements existants :
Exemple

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Copier après la connexion

Vous pouvez ajouter différents types d'événements au même élément :
Exemple

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Copier après la connexion

Ajouter un gestionnaire d'événements à l'objet Window
La méthode addEventListener() vous permet d'ajouter des écouteurs d'événements aux objets HTML DOM tels que les éléments HTML, les documents HTML et les objets fenêtre. Ou d'autres objets d'événement de dépenses tels que : objet xmlHttpRequest.
Exemple
Ajoutez un écouteur d'événement lorsque l'utilisateur réinitialise la taille de la fenêtre :

window.addEventListener("resize", function(){
 document.getElementById("demo").innerHTML = sometext;
});

Copier après la connexion

Paramètres de réussite
Lors du passage des valeurs de paramètres, utilisez des « fonctions anonymes » pour appeler des fonctions avec des paramètres :
Exemple

element.addEventListener("click", function(){ myFunction(p1, p2); });

Copier après la connexion

Bouillonnement d'événement ou capture d'événement ?
Il existe deux manières de diffuser un événement : le bouillonnement et la capture.
La livraison d'événements définit l'ordre dans lequel les événements d'élément sont déclenchés. Si vous insérez un élément

dans un élément

et que l'utilisateur clique sur l'élément

, quel événement « clic » de l'élément sera déclenché en premier ?
En bullage, l'événement de l'élément interne sera déclenché en premier, puis celui de l'élément externe, c'est-à-dire : l'événement click de l'élément

sera déclenché en premier, puis l'événement click de l'élément

sera déclenché.
En capture, l'événement de l'élément externe sera déclenché en premier, puis l'événement de l'élément interne sera déclenché, c'est-à-dire : l'événement click de l'élément

sera déclenché en premier, puis l'événement click de l'élément

sera déclenché.
La méthode addEventListener() peut spécifier le paramètre "useCapture" pour définir le type de diffusion :

addEventListener(event, function, useCapture);

Copier après la connexion

La valeur par défaut est false, ce qui signifie une diffusion par bulle. Lorsque la valeur est vraie, l'événement est diffusé à l'aide de la capture.
Exemple
document.getElementById("myDiv").addEventListener("click", myFunction, true);

Essayez-le »

Méthode RemoveEventListener()
La méthode removeEventListener() supprime le gestionnaire d'événements ajouté par la méthode addEventListener() :
Exemple

element.removeEventListener("mousemove", myFunction);

Copier après la connexion

Prise en charge du navigateur
Les nombres dans le tableau représentent le numéro de version du premier navigateur prenant en charge cette méthode.
JavaScript utilise EventListener pour fonctionner sur les connaissances HTML DOM_Basic
Remarque : IE 8 et versions antérieures d'IE, Opera 7.0 et versions antérieures ne prennent pas en charge les méthodes addEventListener() et removeEventListener(). Cependant, pour ces versions de navigateur, le gestionnaire d'événements peut être supprimé à l'aide de la méthode detachEvent() :

element.attachEvent(event, function);
element.detachEvent(event, function);

Copier après la connexion

Exemple
Solution de contournement multi-navigateurs :

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 所有主流浏览器，除了 IE 8 及更早版本
 x.addEventListener("click", myFunction);
} else if (x.attachEvent) {     // IE 8 及更早版本
 x.attachEvent("onclick", myFunction);

Copier après la connexion

Étiquettes associées：

dom javascript

source：php.cn

Article précédent：js ne charge l'exemple de code de vérification qu'après avoir cliqué sur les compétences text box_javascript Article suivant：Méthode de tri des compétences d'objet JavaScript array_javascript

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur