事件冒泡 与 事件捕捉

事件捕捉 与 事件冒泡

杂谈‘有时候别人的看法别太在意’

事件捕获过程：当给test 添加一个点击事件时 会先从window一级一级向下找 直到找到test 也就是target
事件冒泡过程：捕捉到target后 会再从target一级一级向外传播,直到最外层window

如上图添加4个div 每个div都添加点击监听事件
b1.addEventListener(‘click’, () => console.log(‘我是b1’), true);
事件里有三个参数
第一个参数是事件的类型 (如 “click” ).
第二个参数是事件触发后调用的函数
第三个参数是个布尔值。默认是false（冒泡阶段执行）true(捕获阶段产生)

<script>
    var b1 = document.getElementsByClassName('b1')[0];
    var b2 = document.getElementsByClassName('b2')[0];
    var b3 = document.getElementsByClassName('b3')[0];
    var b4 = document.getElementsByClassName('b4')[0];
    b1.addEventListener('click', () => console.log('我是b1'), true);
    b1.addEventListener('click', () => console.log('我是b1'))
    b2.addEventListener('click', () => console.log('我是b2'), true)
    b2.addEventListener('click', () => console.log('我是b2'))
    b3.addEventListener('click', () => console.log('我是b3'), true)
    b3.addEventListener('click', () => console.log('我是b3'))
    b4.addEventListener('click', () => console.log('我是b4'), true)
    b4.addEventListener('click', () => console.log('我是b4'))
</script>

此时点击最里层b4 执行结果为

说明先从外向内执行事件捕获所出发的函数 到达b4后再由内向外扩散触发

当然 除了事件委托 大多数时候还是要阻止这两种事件产生
清除事件捕获只需要将监听事件第三个参数去掉
清除事件冒泡则需要添加如下兼容性代码

<script>
    var b1 = document.getElementsByClassName('b1')[0];
    var b2 = document.getElementsByClassName('b2')[0];
    var b3 = document.getElementsByClassName('b3')[0];
    var b4 = document.getElementsByClassName('b4')[0];

    b1.addEventListener('click', () => console.log('我是b1'))

    b2.addEventListener('click', () => console.log('我是b2'))

    b3.addEventListener('click', () => console.log('我是b3'))

    b4.addEventListener('click', () => {
        if (event && event.stopPropagation) {
            event.stopPropagation();
        } else {
            window.event.cancelBubble = true;
        }
        console.log('我是b4')
    }, true)
</script>

此时点击b4则只会出发b4的函数