JS事件 - 简书

1. 鼠标事件

mousedown 鼠标按下时触发
mousemove 鼠标在目标元素上移动时处罚
mouseup 鼠标松开时触发
mouseover 鼠标移动到该元素或者其子元素时
mouseout 鼠标移出该元素或其子元素时，产生冒泡事件
mouseleave 鼠标移出该元素时，不产生冒泡事件
mouseenter 鼠标移动到该元素时，不产生冒泡事件
click 点击目标元素时

2. click与mousedown、mouseup的关系

这三者的执行顺序为 mousedown mouseup click
其中一次mousedown+mouseup事件即一次click事件

3. DOM事件流

DOM事件流描述了从页面中接受事件的顺序，包含三个阶段：捕获阶段、目标阶段、冒泡阶段

事件的冒泡和捕获为DOM事件的传播方式，其中，事件冒泡为从目标元素至外层元素，事件捕获为从外层元素至目标元素

使用addEventListener（event,fun,type） 为元素添加监听事件，其中，type值可为true/false，默认为false，当type=true时元素在捕获阶段进行事件监听的执行；当type=false时元素在冒泡阶段进行事件监听的执行。

<div id="a">
  <div id="b">
    <div id="c"></div>
  </div>
</div>

#a{
    width: 300px;
    height: 300px;
    background: pink;
}
#b{
    width: 200px;
    height: 200px;
    background: blue;
}
#c{
    width: 100px;
    height: 100px;
    background: yellow;
}

界面示意图

情景一

var a = document.getElementById("a"),
    b = document.getElementById("b"),
    c = document.getElementById("c");

a.addEventListener("click", function (event) {
    console.log("a click");
},true)
b.addEventListener("click", function (event) {
    console.log("b click");
},true)
c.addEventListener("click", function (event) {
    console.log("c click");
},true)

点击c元素控制台输出顺序

事件触发顺序

a，b，c三个元素事件监听为捕获阶段，点击c元素时，捕获阶段为从外层元素至目标元素，因此监听到事件的顺序分别为a，b，c

情景二

a.addEventListener("click", function (event) {
    console.log("a click");
})
b.addEventListener("click", function (event) {
    console.log("b click");
})
c.addEventListener("click", function (event) {
    console.log("c click");
})

点击c元素控制台的输出

事件触发顺序

a，b，c三个元素事件监听冒泡阶段，点击c元素时，冒泡阶段为从目标元素至外层元素，因此监听到事件的顺序分别为c，b，a

情景三

c.addEventListener("click", function (event) {
    console.log("c click");
},true)

a.addEventListener("click", function (event) {
    console.log("a1 click");
})
a.addEventListener("click", function (event) {
    console.log("a2 click");
},true)
a.addEventListener("click",function(event){
  console.log("a3 click");
  event.stopImmediatePropagation()
})
a.addEventListener("click", function (event) {
    console.log("a4 click");
},true)

点击a元素控制台的输出

事件触发顺序

点击a时处于目标阶段，因此按照代码顺序进行执行。只有点击重叠部分时重叠的元素才会监听到事件因此c元素没有监听到点击事件

阻止冒泡捕获事件方法

阻止冒泡和捕获事件的时候需要是相同的监听类型

stopPropagation

阻止冒泡捕获事件

JS情景

a.addEventListener("click", function (event) { 
  console.log("a click");
},true)
b.addEventListener("click", function (event) {
  console.log("b click"); 
  event.stopPropagation()
},true)
c.addEventListener("click", function (event) {
  console.log("c click");
},true)

点击c时，控制台输出顺序

控制台输出

b元素监听到click事件之后将捕获事件进行阻止因此c元素没有监听click事件

*   stopImmediatePropagation

    *元素上有多个相同类型的监听事件时将按照代码进行顺序执行，通过stopImmediatePropagation可阻止剩余事件的执行并且内部通过调用stopPropagation进行阻止冒泡捕获事件*

    JS情景

    ```
    a.addEventListener("click", function (event) {
        console.log("a1 click");
    })
    b.addEventListener("click", function (event) {
        console.log("b click");   
    })
    c.addEventListener("click", function (event) {
        console.log("c1 click");
    })
    c.addEventListener("click", function (event) {
      console.log("c2 click");
       event.stopImmediatePropagation()
    },true)
    c.addEventListener("click", function (event) {
        console.log("c click");
    })
    ```

    点击c时，控制台输出顺序

控制台输出

在冒泡阶段中当前c元素为目标阶段，首次输出c1，并且顺序执行c元素的其他监听事件，在输出c2时，c元素stopImmediatePropagation阻止流后续c元素的监听事件并且阻止了冒泡事件。