Qu'est-ce que la capture d'événements en javascript?
En JavaScript, différents types d'événements peuvent être effectués, y compris la capture d'événements et la bulle d'événements. Par exemple, la capture d'événements se propage de l'élément racine à l'élément enfant. De l'autre côté, l'événement bouillonnant propage l'élément enfant à l'élément parent ou racine. Pour effectuer la capture de l'événement "addEventListener ()«La méthode peut être utilisée.
Ce message expliquera la capture d'événements JavaScript.
Qu'est-ce que la capture d'événements en javascript?
La capture d'événements est un scénario particulier dans lequel les événements générés commencent à partir des éléments parents et se dirigent vers l'élément cible / enfant qui a lancé le cycle de l'événement. Il est totalement différent du bouillonnement des événements, dans lequel les événements se propagent vers l'extérieur de la spécifique aux éléments les plus externes. De plus, la capture d'éléments se produit avant de bouillonner.
Syntaxe
AddeventListener (type, auditeur, usecapture)
Dans cette syntaxe:
- "taper»Détermine le type de l'événement.
- "auditeur»Définit la fonction d'appel lorsqu'un événement spécifique se produit.
- "user"Indique la valeur booléenne qui est fausse par défaut et montre qu'elle est en phase bouillonnante.
Exemple 1: Capturation d'événements de l'élément bouton
Tout d'abord, ajoutez un "div»Contaiteur et affectez un ID avec un nom particulier pour capturer l'événement. Ensuite, utilisez le «”Élément pour faire un bouton et intégrer du texte à afficher sur le bouton:
De plus, entre le «»Élément, d'abord, invoque le«QuerySelector ()«Méthode et passez le«identifiant«Pour sélectionner et stocker dans la variable déclarée:
var parentement = document.queySelector ('# main');
Ensuite, accédez au bouton en utilisant l'ID de bouton à l'aide de "QuerySelector ()»:
var childElement = document.queySelector ('# btn');
Invoque le «addEventListener ()»Et passez l'événement. Cet événement fonctionne lorsque l'utilisateur clique sur le bouton. Il déclenchera l'élément parent sur chaque bouton cliquez et imprimera le résultat sur la console:
parentélement.addEventListener ('click', function ()
console.log ("Invoquer un élément parent");
,vrai);
Utilisez le «liaison.addEventListener ()”Méthode pour invoquer l'élément enfant sur chaque bouton CLIQUER L'événement. Ensuite, appelez la console.Méthode log () Pour afficher le résultat sur la console:
liaison.addEventListener ('click', function ()
console.log ("Invoke Child Element");
);
On peut observer que l'événement a été capturé avec succès sur chaque bouton CLIC:
Exemple 2: capture d'événements de l'élément de paragraphe
Pour capturer l'événement de l'élément de paragraphe, utilisez le « D'abord Deuxième Troisième Définir un «event_capture ()”Fonction et utilisez le code suivant répertorié ci-dessous: Appelez la fonction définie à afficher à l'écran: C'est tout au sujet de la capture de l'événement en javascript. Conclusion La capture d'événements commence à propager l'élément du parent et se dirige vers l'élément cible / enfant qui a lancé le cycle de l'événement. Pour effectuer la capture de l'événement "addEventListener ()«La méthode peut être utilisée. Ce message a démontré la méthode pour effectuer la capture d'événements.
function event_capture ()
var all_p = document.getElementsByTagName ("p");
pour (var i = 0; i < All_p.length; i++)
All_p [i].addEventListener ("cliquez", clickhandler, true);
fonction ClickHandler ()
alerte (ceci.getAttribute ("id") + "événement géré avec succès");