Cet article vous présente une brève analyse du flux d'événements en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Les événements sont généralement utilisés conjointement avec des fonctions, de sorte que l'exécution des fonctions puisse être pilotée par les événements qui se produisent. Les événements sont des comportements qui peuvent être détectés par JavaScript.
. Tout d'abord, nous devons lier l'événement. Il existe trois types d'événements de liaison
1）在DOM元素中直接绑定，我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等等
只可以执行一次 多次使用会跟随文档流所覆盖
<p></p>
<script>
var box1=document.getElementById("box1");
box1.onclick=function(){
alert("你瞅啥")
}
box1.onclick=function(){
alert("瞅你咋地")
}
</script>
只弹出一个 瞅你咋地 你瞅啥被覆盖2) La liaison dans le code JavaScript La liaison des événements dans le code JavaScript (c'est-à-dire dans la balise de script) peut être effectuée. le code JavaScript et les balises HTML Séparation, structure de document claire, facile à gérer et à développer
<p></p>
<script>
var box1=document.getElementById("box1");
box1.onclick = function () {
alert("不服就干");
}
</script>3) Utiliser des écouteurs d'événements pour lier des événements
Une autre façon de lier des événements est d'utiliser addEventListener() ou attachEvent () pour lier la fonction d'écoute d'événements
<p></p>
<script>
var box1=document.getElementById("box1");
box1.addEventListener("click",function(){
alert("再瞅个试试")
},false)
//默认值为false 可以省略不写
box1.addEventListener("click",function(){
alert("试试就试试")
}) //默认值为false 可以省略不写
</script>
两个都可以正常弹出 跟随文档流执行La norme DOM stipule que le flux d'événements comprend trois étapes : l'étape de capture d'événements, l'étape cible et scène de bulle bouillonnante d'événement.
Capture du flux d'événements : la propagation des événements s'effectue de la cible d'événement la moins spécifique à la cible d'événement la plus spécifique. C'est-à-dire de l'extérieur vers l'intérieur.
Flux d'événements bouillonnant : la propagation des événements s'effectue de la cible d'événement la plus spécifique à la cible d'événement la moins spécifique. C'est-à-dire de l'intérieur vers l'extérieur
我们有以下代码 点击box3的时候 跟随Une brève analyse du contenu du flux dévénements en javascript 捕获 冒泡
<p>box1
</p><p>box2
</p><p>box3</p>
<script>
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var box3=document.getElementById("box3");
box1.addEventListener("click", function () {
console.log("捕获box1")
}, true)
box2.addEventListener("click", function () {
console.log("捕获box2")
}, true)
box3.addEventListener("click", function () {
console.log("捕获box3")
}, true)
box1.addEventListener("click", function () {
console.log("冒泡box1")
}, false)
box3.addEventListener("click", function () {
console.log("冒泡box3")
}, false)
box2.addEventListener("click", function () {
console.log("冒泡box2")
}, false)
</script>Lorsque vous êtes au stade cible, c'est-à-dire lorsque vous cliquez sur la case 3 de cet article, si vous écrivez des bulles devant la capture, cela suivra. L'exécution du flux documentaire entraîne d'abord un bouillonnement puis une capture. Assurez-vous de noter comme suit :
Délégation d'événement - lier les événements à éléments parents pour surveiller les événements bouillonnants des éléments enfants et trouver de quel élément enfant correspond l'événement
Trilogie de délégation d'événements :
Étape 1 : lier l'événement à l'élément parent
Ajouter un événement de liaison à l'élément ul, et ajoutez un événement de liaison à l'événement de clic via addEventListener Déterminer
Étape 2 : Surveiller l'événement bouillonnant du sous-élément
La valeur par défaut ici est bouillonnante en cliquant sur le sous-élément li
. Étape 3 : Rechercher de quel sous-élément provient l'événement
Passer la fonction de rappel anonyme pour recevoir l'objet d'événement, via la vérification d'alerte
<p> </p>
<p>
</p>
<script>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.addEventListener("click", function () {
alert("我是第box1")
})
box2.addEventListener("click", clickStop)
//设置函数 阻止box2冒泡事件 当点击第二次时 阻止冒泡事件
var num = 0;
function clickStop() {
if (num >= 1) {
box2.addEventListener(clickStop)
} else {
alert("我是box2");
num++;
}
}
</script>
<script>
var box = document.getElementsByClassName("box")[0];
window.oncontextmenu = function (event) {
//关闭右键浏览器默认样式
event.preventDefault();
}
</script>