事件流 - 事件传播

事件流 - 事件传播

事件传播的三个阶段： 捕获-1， 目标-2， 冒泡-3

• 事件冒泡： 事件的一种传播方法，根据 DOM 树从下往上传播；
• 事件捕获： 事件的一种传播方法，根据 DOM 树从上往下传播；不支持 IE678；
• 目标： 点击的事件所属的事件源；

addEventListener('click', () => {}, true/false)
第三个参数控制冒泡 / 捕获，true：捕获； 不写默认 false：冒泡；

<div class="box">
    <p class="child"></p>
</div>
复制代码

.box {
  width: 300px;
  height: 300px;
  margin: 200px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: skyblue;
}
.child {
  width: 100px;
  height: 100px;
  margin: 100px;
  cursor: move;
  border: 1px solid #ccc;
  background-color: lightgreen;
}
复制代码

let box1 = document.querySelector('.box')
let box2 = document.querySelector('.child')
复制代码

冒泡

document.addEventListener('click', () => {
  console.log('您点击了 document');
})

box1.addEventListener('click', () => {
  console.log('您点击了 box1');
  // 您点击了 box1
  // 您点击了 document
})

box2.addEventListener('click', () => {
  console.log('您点击了 box2');
  // 您点击了 box2
  // 您点击了 box1
  // 您点击了 document
})
复制代码

判断阶段 （捕获-1，目标-2，冒泡-3）

document.addEventListener('click', (event) => {
  console.log('document:' + event.eventPhase);
}, true)

box1.addEventListener('click', (event) => {
  console.log('box1:' + event.eventPhase);
})

box2.addEventListener('click', (event) => {
  console.log('box2:' + event.eventPhase);
  // document:1 捕获
  // box2:2 目标
  // box1:3 冒泡
})
复制代码

事件引发者

document.addEventListener('click', (event) => {
  console.log('document:' + event.target.tagName);
}, true)
// document:BODY

box1.addEventListener('click', (event) => {
  // console.log('box1:' + event.target.tagName);
}, true)
// document:DIV

box2.addEventListener('click', (event) => {
  // console.log('box2:' + event.target.tagName);
}, true)
// document:P
复制代码

阻止冒泡

• event.stopPropagation()    // 正常浏览器
• event.cancelBubble = true   // IE678

    document.addEventListener("click",function(){
        console.log("您点击了document");
    });

    box1.addEventListener("click",function(){
        console.log("您点击了box1");

    });

    box2.addEventListener("click",function(event){
        var event = event || window.event;
        console.log("您点击了box2");
        //  阻止冒泡
        if(event.stopPropagation) {
            event.stopPropagation();  // 正常浏览器
        }else {
            event.cancelBubble = true;  //  ie678
        }
    });
复制代码

转载于:https://juejin.im/post/5c1f887e51882535e5272ef5