addEventListener & onclick & (event capturing or dubbed bubbling)

一、概念
DOM.addEventListener() 方法用于向指定元素添加事件句柄。
使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

DOM.onclick = function(){} 把函数赋值给DOM的onclick属性，点击时会触发这个事件。

区别：

1. addEventListener(方法名，回调函数，捕获或冒泡 )， 可选择捕获或冒泡执行（默认冒泡-false）， onclick只能冒泡阶段执行。
2. addEventListener可添加多个相同事件； DOM.onclick是赋值语句，后者替换前者。

提示：两种方法回调函数返回的参数相同。

二、事件捕获和事件冒泡
事件捕获（event capturing） 从外向内
事件冒泡（dubbed bubbling） 从内向外

点击某个元素的事件流程如下

5dc10ab58474329ee642027c84ac60f.png

事件执行顺序 与视觉位置无关， 只与真实dom层级有关（例如用z-index把子元素放在父元素之下， 错位漏出子元素，点击子元素，事件捕获 还是父到子，冒泡子到父）