2021-05-21 事件冒泡和阻止事件冒泡

最新推荐文章于 2024-04-05 06:42:51 发布

原创最新推荐文章于 2024-04-05 06:42:51 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#事件处理机制 #点击事件 #js #javascript

js 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了JavaScript中的事件冒泡现象，即子元素事件触发会依次执行父元素相同事件。通过`event.stopPropagation()`可以阻止事件冒泡。同时，对比了`onmouseover`和`onmouseenter`事件，`onmouseover`会在子元素上触发父元素的事件，而`onmouseenter`则不会。理解这些概念有助于优化DOM事件处理。

事件冒泡:
子元素设置的事件被执行时,其所有设置了同一事件的父元素也会执行的现象

var wrap = document.querySelector(".wrap");
var box = document.querySelector(".box");
wrap.onclick = function() {console.log("我是wrap");}
box.onclick = function() {console.log("我是box");}
//输出结果:点一下box元素,其父元素wrap的输出语句也会执行

阻止事件冒泡:
函数:stopPropogation()

//修改box.onclick如下
box.onclick = function(eve) {
    //阻止冒泡
    if (eve.stopPropogation) eve.stopPropogation();//兼容非IE
    else eve.cancelBubble = true;//兼容IE
    console.log("我是box");
}
//输出结果:点哪个元素,只输出对应的语句

onmouseover和onmouseenter的区别:
onmouseover:

 wrap.onmouseover = function() {
     console.log("我是wrap");
 }
 box.onmouseover = function() {
     console.log("我是box");
 }
//输出结果:鼠标移入box元素,其父元素wrap的输出语句也会执行

onmouseenter:

wrap.onmouseenter = function() {
    console.log("我是wrap");
}
box.onmouseenter = function() {
        console.log("我是box");
    }
    //输出结果:鼠标移入box元素,其父元素wrap的输出语句不会执行