Comme le dit le proverbe, une bonne mémoire n'est pas aussi bonne qu'un mauvais stylo. Si vous ne comprenez pas parfaitement autant d'articles techniques, il sera facile d'oublier rapidement les points techniques. L'éditeur parcourt habituellement et les notes que j'ai compilées pour les partager avec vous.
Pendant le processus de développement, nous espérons tous utiliser les frameworks matures d'autres personnes, car se tenir sur les épaules de géants améliorera considérablement l'efficacité de notre développement. Cependant, nous devons également comprendre ses principes fondamentaux. Par exemple, pour les événements DOM, le framework jquery nous aide à encapsuler et à résumer les différents comportements de différents navigateurs, apportant ainsi une grande commodité au traitement des événements. Cependant, les navigateurs deviennent progressivement unifiés et standardisés, et nous pouvons utiliser les interfaces standardisées officielles avec plus de sécurité. Car ce n’est qu’en gagnant le cœur et l’esprit de nombreux développeurs que le navigateur pourra aller plus loin. Tout comme lorsque nous utilisons un navigateur de version inférieure pour ouvrir certaines pages, il nous sera demandé d'utiliser un navigateur avancé tel que Chrome pour y accéder. Mais il s’agit d’un processus révolutionnaire. Afin que notre page Web puisse mieux servir un plus grand nombre de personnes, nous devons désormais être mieux compatibles avec ces problématiques historiques. Pour être compatible, en plus de s’appuyer sur le framework, il faut comprendre ses principes de base.
Trois étapes des événements DOM
Lorsqu'un événement DOM est déclenché, il ne se déclenche pas simplement une seule fois sur l'objet lui-même, mais va passer par trois étapes différentes :
1. Phase de capture : Tout d'abord, passez du document de nœud racine du document à l'objet déclencheur d'événement et capturez l'objet d'événement de l'extérieur vers l'intérieur
;
2. Étape cible : Arrivez à l'emplacement cible de l'événement (là où l'incident s'est produit) et déclenchez l'événement
;
3. Étape bulle : remontez ensuite de l'emplacement de l'événement cible jusqu'au nœud racine du document, et faites bouillonner l'objet événement de l'intérieur vers l'extérieur.
Source de la citation : http://www.w3.org/TR/DOM-Level-3-Events/#event-flow
L'ordre de capture et de bouillonnement des événements est évident.
Partie expérimentale
Ouvrez l'éditeur en ligne : http://jsbin.com/goqede/edit?html,css,js,output
Le code est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>Document</title>
<style>
#outer{
text-align: center;
width: px;
height: px;
background-color: #ccc;
margin: auto;
}
#middle{
width: px;
height: px;
background-color: #f;
margin: auto;
}
#inner{
width: px;
height: px;
background-color: #f;
margin: auto;
border-rad
}
</style>
</head>
<body>
<div id='outer'>
<span>outer</span>
<div id='middle'>
<span>middle</span>
<div id='inner'>
<span>inner</span>
</div>
</div>
</div>
<script>
function $(element){
return document.getElementById(element);
}
function on(element,event_name,handler,use_capture){
if(addEventListener){
$(element).addEventListener(event_name,handler,use_capture);
}
else{
$(element).attachEvent('on'+event_name,handler);
}
}
on("outer","click",o_click_c,true);
on("middle","click",m_click_c,true);
on("inner","click",i_click_c,true);
on("outer","click",o_click_b,false);
on("middle","click",m_click_b,false);
on("inner","click",i_click_b,false);
function o_click_c(){
console.log("outer_捕获");
alert("outer_捕获");
}
function m_click_c(){
console.log("middle_捕获")
alert("middle_捕获");
}
function i_click_c(){
console.log("inner_捕获")
alert("inner_捕获");
}
function o_click_b(){
console.log("outer_冒泡")
alert("outer_冒泡");
}
function m_click_b(){
console.log("middle_冒泡")
alert("middle_冒泡");
}
function i_click_b(){
console.log("inner_冒泡")
alert("inner_冒泡");
}
</script>
</body>
</html>Copier après la connexion
Lorsque nous cliquons à l'intérieur, le résultat est :
capture_extérieure
middle_capture
capture_intérieure
bulle_inner
middle_bubble
bulle_extérieure
On peut voir que l'événement est d'abord capturé de l'extérieur vers l'intérieur, jusqu'à ce que l'élément événementiel soit atteint, puis remonte jusqu'au nœud racine de l'intérieur vers l'extérieur
conseils :
Lorsqu'un événement est déclenché dans l'étape cible, il sera exécuté selon l'ordre d'inscription de l'événement. L'ordre d'inscription dans les deux autres étapes n'affecte pas l'ordre d'exécution de l'événement. Autrement dit, si les événements de bouillonnement et les événements de capture sont enregistrés ici, ils seront exécutés dans l'ordre d'enregistrement.
Par exemple, lorsque je clique à l'intérieur, selon l'ordre ci-dessus, la réponse est bien la réponse que l'on souhaite :
,
Lorsque ma séquence d'inscription à l'événement est modifiée par le code suivant :
Quand on clique sur extérieur :
Quand on clique sur le milieu :
Quand on clique à l'intérieur :
On peut voir que l'ordre d'exécution de l'événement sur l'élément événementiel dans l'étape cible est déterminé par l'ordre d'inscription de l'événement
Le contenu ci-dessus est l'étape de l'événement DOM et la séquence d'exécution de la capture d'événement et du bouillonnement d'événement dans cet article (images et textes détaillés). J'espère qu'il sera utile pour le travail et l'étude futurs de chacun.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
