Une brève analyse du contenu entre la liaison d'événement js, l'écoute d'événement et la délégation d'événement

Le contenu de cet article concerne une brève analyse de la liaison d'événements js, de la surveillance des événements et de la délégation d'événements. J'espère que cela vous sera utile.

1. Liaison d'événements
Pour que JavaScript réponde aux opérations de l'utilisateur, vous devez d'abord lier les fonctions de traitement d'événements aux éléments DOM. La fonction dite de traitement d'événements est une fonction qui traite les opérations des utilisateurs. Différentes opérations correspondent à des noms différents.
Il existe trois méthodes couramment utilisées pour lier des événements :
(1) Lier les événements directement dans le DOM
Nous pouvons lier en cliquant sur l'élément DOM, en survolant la souris , onmouseout, onmousedown, onmouseup, ondblclick, onkeydown, onkeypress, onkeyup, etc.

<input type="button" value="click me" onclick="hello()"><script>
function hello(){
    alert("hello world!");
}
</script>

(2) Les événements de liaison dans le code JavaScript
Les événements de liaison dans le code JavaScript (c'est-à-dire dans les balises de script) peuvent séparer le code JavaScript des balises HTML. et facile à gérer et à développer.

<input type="button" value="click me" id="btn"><script>
document.getElementById("btn").onclick = function(){
    alert("hello world!");
}
</script>

(3) Utilisez l'écoute d'événements pour lier des événements
Une autre façon de lier des événements consiste à utiliser addEventListener() ou attachEvent() pour lier la fonction d'écoute d'événements.
Surveillance des événements
Concernant la surveillance des événements, la spécification W3C définit trois étapes d'événement, qui sont l'étape de capture, l'étape cible et l'étape de bouillonnement.
Spécification W3C

element.addEventListener(event, function, useCapture)

événement : (obligatoire) nom de l'événement, prend en charge tous les événements DOM.
fonction : (obligatoire) Spécifie la fonction à exécuter lorsque l'événement est déclenché.
useCapture : (facultatif) Spécifie si l'événement est exécuté en phase de capture ou de bouillonnement. vrai, capturer. faux, bulle. La valeur par défaut est fausse.

<input type="button" value="click me" id="btn1"><script>
document.getElementById("btn1").addEventListener("click",hello);
function hello(){
    alert("hello world!");
}
</script>

Standard IE

element.attachEvent(event, function)

événement : (obligatoire) type d'événement. Il faut ajouter "on", par exemple : onclick.
fonction : (obligatoire) Spécifie la fonction à exécuter lorsque l'événement est déclenché.

<input type="button" value="click me" id="btn2"><script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
    alert("hello world!");
}
</script>

Avantages de la surveillance des événements
1. Plusieurs événements peuvent être liés.
La liaison d'événement régulière n'exécute que le dernier événement lié. L'écouteur d'événements peut exécuter plusieurs fonctions.

<input type="button" value="click me" id="btn4"><script>
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
    alert("hello 1");
}
function hello2(){
    alert("hello 2");
}
</script>

2. Vous pouvez dissocier la

<input type="button" value="click me" id="btn5"><script>
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//执行了
btn5.addEventListener("click",hello2);//不执行
btn5.removeEventListener("click",hello2);
function hello1(){
    alert("hello 1");
}
function hello2(){
    alert("hello 2");
}
</script>

Surveillance des événements encapsulés

<input type="button" value="click me" id="btn5">//绑定监听事件
function addEventHandler(target,type,fn){
    if(target.addEventListener){
        target.addEventListener(type,fn);
    }else{
        target.attachEvent("on"+type,fn);
    }
}//移除监听事件
function removeEventHandler(target,type,fn){
    if(target.removeEventListener){
        target.removeEventListener(type,fn);
    }else{
        target.detachEvent("on"+type,fn);
    }
}

Capture d'événement : La capture d'événement fait référence au processus allant du document au nœud qui déclenche l'événement, c'est-à-dire de haut en bas pour déclencher l'événement.
Evénement bouillonnant : déclenche des événements de bas en haut. Le troisième paramètre de la méthode des événements liés est de contrôler si la séquence de déclenchement d'événement est une capture d'événement. vrai, capture d'événement ; faux, événement bouillonnant. La valeur par défaut est false, ce qui signifie que l'événement bouillonne.

<p id="parent">
　　<p id="child" class="child"></p>
</p>

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发，"+this.id);
            })
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发，"+this.id)
            })

child事件被触发，child
parent事件被触发，parent

Conclusion : enfant d'abord, puis parent. Les événements sont déclenchés dans l’ordre de l’intérieur vers l’extérieur, ce qu’on appelle le bouillonnement d’événements.
Changez maintenant la valeur du troisième paramètre en vrai :

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发，"+e.target.id);
            },true)
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发，"+e.target.id)
            },true)parent事件被触发，parentchild事件被触发，child

Conclusion : d'abord parent, puis enfant. L'ordre de déclenchement des événements est modifié de l'extérieur vers l'intérieur, ce qui correspond à la capture d'événements.

Empêcher les événements de bouillonner et empêcher les événements par défaut :
Méthode event.stopPropagation() : Il s'agit d'une méthode pour empêcher les événements de bouillonner et empêcher les événements de s'écoulant sur le document, mais l'événement par défaut sera toujours exécuté. Lorsque vous utilisez cette méthode, si vous cliquez sur une connexion, la connexion sera toujours ouverte.
Méthode event.preventDefault() : Il s'agit d'une méthode pour empêcher l'événement par défaut. Lorsque cette méthode est appelée, la connexion ne sera pas ouverte, mais un bouillonnement se produira et le bouillonnement sera transmis. vers la couche supérieure.Élément parent
return false : Cette méthode est plus violente. Elle empêchera le bouillonnement des événements et empêchera les événements par défaut. Lorsque ce code est écrit, la connexion ne sera pas ouverte et l'événement. ne sera pas transmis à l'élément supérieur. L'élément parent d'une couche ; on peut comprendre que return false équivaut à appeler event.stopPropagation() et event.preventDefault() en même temps

2. Délégation d'événement
La délégation d'événement est à utiliser Le principe du bullage est d'ajouter des événements aux éléments parents ou aux éléments ancêtres pour déclencher des effets d'exécution.

<input type="button" value="click me" id="btn6">
var btn6 = document.getElementById("btn6");
document.onclick = function(event){    
event = event || window.event;    
var target = event.target || event.srcElement;    
if(target == btn6){
        alert(btn5.value);
    }
}

Avantages de la délégation d'événements
1. Améliorez les performances JavaScript. La délégation d'événements peut améliorer considérablement la vitesse de traitement des événements et réduire l'utilisation de la mémoire

<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li></ul><script>
  var item1 = document.getElementById("item1");
  var item2 = document.getElementById("item2");
  var item3 = document.getElementById("item3");

document.addEventListener("click",function(event){
    var target = event.target;    
    if(target == item1){
        alert("hello item1");
    }else if(target == item2){
        alert("hello item2");
    }else if(target == item3){
        alert("hello item3");
    }
})</script>

2. Ajoutez des éléments DOM de manière dynamique, sans modifier les liaisons d'événements en raison des changements d'éléments.

<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li></ul><script>var list = document.getElementById("list");

document.addEventListener("click",function(event){
    var target = event.target;    
    if(target.nodeName == "LI"){
        alert(target.innerHTML);
    }
})
var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);
</script>

Recommandations associées :

Une brève discussion sur l'événement de liaison on() et l'événement de déliaison off() de jquery

Une brève discussion sur les méthodes courantes de liaison d'événements JavaScript et une analyse de ses avantages et inconvénients

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!