js中 事件流与阻止冒泡 事件对象.stopPropagation()

  事件流的顺序:

先捕获再冒泡 (先从外到内 再从内到外)

注意:事件流的一个元素捕获事件触发过了 那么此元素就不会在冒泡事件中再运行了

冒泡事件:(默认存在)

当一个元素触发事件后 会依次向上调用同名事件(必须是同名事件,如果子元素触发点击事件,父元素的鼠标的鼠标经过事件不会触发)

<div class="grandf">爷爷
        <div class="fa">爸爸
            <div class="son">孙子</div>
        </div>
    </div>

grandf.addEventListener('click', function () {
            console.log('我是爷爷');
        })
        fa.addEventListener('click', function () {
            console.log('我是爸爸');
        })
        son.addEventListener('click', function () {
            console.log('孙子');
        })
        document.addEventListener('click', function () {
            console.log('我是大爷爷');
        })  //默认就是冒泡事件

点击孙子后的事件流程:

阻止冒泡:

书写:事件对象.stopPropagation() 配合事件对象e使用

stop:停止

propagation:l流动,传播

 grandf.addEventListener('click', function () {
            console.log('我是爷爷');
        })
        fa.addEventListener('click', function () {
            console.log('我是爸爸');
        })
        son.addEventListener('click', function (e) {
            console.log('孙子');
            e.stopPropagation()
        })
        document.addEventListener('click', function () {
            console.log('我是大爷爷');
        })  //默认就是冒泡事件

在孙子出阻止冒泡  则点击孙子  效果:

捕获事件:

当一个元素触发事件后 会依次向下调用同名事件(必须是同名事件, 例:子元素触发点击事件,父元素的鼠标经过事件不会触发)

DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)   false/true  true为使用捕获

grandf.addEventListener('click', function () {

​      console.log('我是爷爷');

​    },true)//使用捕获机制

​    fa.addEventListener('click', function () {

​      console.log('我是爸爸');

​    },true)

​    son.addEventListener('click', function () {

​      console.log('孙子');

​    },true)

​    document.addEventListener('click', function () {

​      console.log('我是大爷爷');

​    },true)//加上true 就是代表捕获事件 从外往内

点击孙子  事件流程为:

阻止捕获:在哪个元素阻止捕获 此元素的子元素的同名事件就不会再捕获触发了(阻止元素本身可以捕获)   可以理解为:捕获事件截止的位置

理解:   

如: 爷爷 爸爸 儿子 孙子 在爸爸处截止捕获 则点击儿子或者孙子只会出现触发 爸爸和爷爷

grandf.addEventListener('click', function () {

​      console.log('我是爷爷');

​    },true)//使用捕获机制

​    fa.addEventListener('click', function (e) {

​      console.log('我是爸爸');
      e.stopPropagation()

​    },true)

​    son.addEventListener('click', function () {

​      console.log('孙子');

​    },true)

​    document.addEventListener('click', function () {

​      console.log('我是大爷爷');

​    },true)//加上true 就是代表捕获事件 从外往内

如果爸爸被阻止捕获了  那么无论点击儿子还是孙子 都只会触发爸爸及爸爸的父元素的事件   儿子和孙子本身的时事件也不会触发