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

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

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的输出语句不会执行

*鼠标移出事件:onmouseout与onmouseleave同理