javascript事件冒泡和事件捕获

定义

冒泡：作用于子元素上的事件会一级一级向上传递，类似于冒泡的形式。
捕获：作用于父元素的事件会一级一级向下传递到最终的子元素。

使用方法

EventTarget.addEventListener()语法：

element.addEventListener(event, function, useCapture)
//event:click,mousedown,mouseup,keydown,keyup,keypress
//function :方法
//useCapture: true(捕获阶段执行) false(默认，冒泡阶段执行)

例子

#parent {
   margin:50px auto;
    height: 300px;
    width:300px;
    background-color: #bcbcbc;
}

#son {
    height: 100px;
    width:100px;
    margin:100px auto;
    background-color: green;
}
<div id="parent">
   我是父亲
    <div id="son">我是儿子</div>
</div>

如图：儿子是在父亲里面

给儿子和父亲都添加事件：

function handler(event) {
    console.log('target: ', event.target);
    console.log('curtrentTarget: ', event.currentTarget);
}
let pa = document.getElementById('parent');
pa.addEventListener('click', handler, false);
let son = document.getElementById('son');
son.addEventListener('click', handler, false);

target和currentTarget

target：它代表触发事件的那个元素（冒泡阶段就是最低层的元素，捕获阶段就是最顶层的元素。
currentTarget：表示当前阶段注册了EventListener的元素。

操作冒泡

点击son

点击parent

可以看到点击son第一次打印的target和currentTarget都是son，而第二次事件冒泡到了parent，此时target是son，currentTarget变成了parent。

操作捕获

let pa = document.getElementById('parent');
pa.addEventListener('click', handler, true);
let son = document.getElementById('son');
son.addEventListener('click', handler, true);

点击son:

点击parent:

点击son的时候此时事件是在捕获阶段执行，也就是说会先触发parent的click事件。

再次说明target和currentTarget：
target始终不变，它代表触发事件的那个元素（冒泡阶段就是最低层的元素，捕获阶段就是最顶层的元素。而currentTarget则表示当前阶段注册了EventListener的元素。

结合实际情况使用：javascript中事件委托（代理）