DOM添加监听事件addEventListener解释和冒泡捕获

const $ = document.querySelector.bind(document);
    const box1 = $('#box1');
    const box2 = $('#box2');

    box1.addEventListener('click', () => {
        console.log('box1 true');
    }, true);

    box1.addEventListener('click', () => {
        console.log('box1 false');
    }, false);

    box2.addEventListener('click', () => {
        console.log('box2 true');
    }, true);

    box2.addEventListener('click', () => {
        console.log('box2 false');
    }, false);

添加事件有3个参数,第一个就是触发条件,第二个函数体,第三个是useCapture值(布尔值,可选参数),默认false,为冒泡,若为true,则为捕获.

冒泡和捕获

事件由子元素传递到父元素的过程叫做冒泡（false）

事件由父元素传递到子元素的过程叫做事件捕获（ture）

阻止事件冒泡的几个方法:

1. event.stopPropagation()
2. event.cancelBubble=true
3. return false;