深入理解JS的事件绑定、事件流模型(2)

1. 事件冒泡(fasle/不写)：当触发一个节点的事件是，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点。
2. 事件捕获(true)：当初发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，直到当前节点自身。
3. 什么时候事件冒泡？什么时候事件捕获？
 ① 当使用addEventListener绑定事件，第三个参数传为true时表示事件捕获；
 ② 除此之外的所有事件绑定均为事件冒泡。

4. 阻止事件冒泡：

① IE10之前，e.cancelBubble = true;
 ② IE10之后，e.stopPropagation();

5. 阻止默认事件：

① IE10之前：e.returnValue = false;
 ② IE10之后：e.preventDefault();

//css #div1{ width: 300px;; height: 300px; background-color: powderblue; } #div2{ width: 200px; height: 200px; background-color: deeppink; } #div3{ width: 100px; height: 100px; background-color:#A9A9A9; } //html <div> <div> <div></div> </div> </div> <a href="https://www.jb51.net/01-事件笔记.html">超链接</a> div1.addEventListener("click",function(){ console.log("div1 click"); },false); div2.addEventListener("click",function(){ console.log("div2 click"); },false); div3.addEventListener("click",function(){ //原来的顺序是：3-->2-->1。 // myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡； console.log("div3 click"); },false);

结果（事件冒泡）（由小到大div3-》div2-》div1）：

div1.addEventListener("click",function(){ console.log("div1 click"); },true); div2.addEventListener("click",function(){ console.log("div2 click"); },true); div3.addEventListener("click",function(){ // myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡； console.log("div3 click"); },true);

结果(事件捕获)（由小到大div3-》div2-》div1）：

//依然遵循事件冒泡 document.onclick=function(){ console.log("document click") } //截获事件流阻止事件冒泡 function myParagraphEventHandler(e) { e = e || window.event; if (e.stopPropagation) { e.stopPropagation(); //IE10以后 } else { e.cancelBubble = true; //IE10之前 } } //截获事件流阻止事件冒泡 function myParagraphEventHandler(e) { e = e || window.event; if (e.stopPropagation) { e.stopPropagation(); //IE10以后 } else { e.cancelBubble = true; //IE10之前 } } //阻止默认事件 function eventHandler(e) { e = e || window.event; // 防止默认行为 if (e.preventDefault) { e.preventDefault(); //IE10之后 } else { e.returnValue = false; //IE10之前 } }

总结

以上所述是小编给大家介绍的JS的事件绑定、事件流模型，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章: