DOM事件与事件委托

事件监听类型之捕获与冒泡

执行顺序：先捕获后冒泡

// 捕获 父->子
btn1.addEventListener('click', fn, true)

// 冒泡 子->父
btn1.addEventListener('click', fn)
btn1.addEventListener('click', fn, false)

特例：单一元素同时添加捕获与冒泡类型的事件监听函数，函数执行顺序由JavaScript程序执行顺序决定。

阻止冒泡

e.stopPropagation()

自定义事件

new CustomEvent('eName', {
    detail:{hello:'world'}, 
    bubbles:true, 
    cancelable:false
})

element.dispatchEvent(event)

事件委托

在父元素上添加事件监听，而非在（多个）子元素上添加事件监听。
父元素可用e.target获得触发事件监听的子元素.

优点:
1. 节省内存
2. 监听动态生成的元素

附录

备注：
JavaScript原生不支持事件,DOM事件不同于JavaScript事件.