捕获与冒泡

1. 所有冒泡皆可取消，默认动作有的可以取消有的不能取消。
2. Cancelable是用来取消(也可以说是阻止)默认动作的。

从外向内找监听函数叫事件捕获
从内向外找监听函数叫事件冒泡

事件冒泡即由最具体的元素（文档中嵌套层次最深的节点）到最不具体的元素（文档）。
HTML结构如下

<div id="parent">
    <div id="child"></div>
</div>

JS代码

// DOM0级

child.onclick=function(){
    console.log('child')
}
parent.onclick=function(){
    console.log('parent')
}
document.onclick=function(){
    console.log('body')
}
document.onclick=function(){
    console.log('document')
}

// DOM2级

child.addEventListener('click',function(e){
    console.log('child');
},false)
parent.addEventListener('click',function(e){
    console.log('parent');
},false)
document.body.addEventListener('click',function(e){
    console.log('body');
},false)
document.addEventListener('click',function(e){
    console.log('document');
},false)
    

target、currentTarget、取消冒泡

target vs currentTarget
区别：

• e.target 用户操作的元素
• e.currentTarget 程序员监听的元素
• this是e.currentTarget，不推荐使用

举例：div > span{文字}，用户点击文字
e.target就是span
e.currentTarget就是div

捕获不可取消，但是冒泡可以。
e.stopPropagation()可终止冒泡，一般用于封装一些独立的组件。
有些事件不可取消冒泡
比如：
MDN搜索滚动事件scroll event(看英文，中文不全)

自定义事件

浏览器自带事件有一百多种，在MDN文档中。
target.dispatchEvent()

事件委托

参考文章
事件委托(Event delegation)是一种事件的响应机制，通常运用于监听不存在的元素或是动态生成的元素。
事件委托得益于事件冒泡，当监听子元素时，事件冒泡会通过目标元素向上传递到父级，直到document（IE5冒泡会到document终止，IE6的话在冒泡到document之前还会冒泡到html，Mozilla1.0及更高版本则会冒泡到window终止。），所以如果子元素不存在或者是动态生成的，可以通过监听父元素来替代监听子元素。

• 如果要给100个按钮添加点击事件怎么办？
  答：监听者100个按钮的祖先，

• 如果想监听目前不存在的元素的点击事件怎么办？
  

  答：监听祖先，等点击的时候console.log查看是不是想要监听的元素。
• 优点：1. 省监听数(内存) 2. 可以监听动态元素或不存在的元素。

封装事件委托

什么是事件委托？
答案一：
给一个元素添加一个监听，判断当前target是不是满足selector，满足就调用函数，不满足就放过。

如何阻止默认事件

方法一：直接使用event对象调用preventDefault()方法。(但是该方法不支持IE9一下的浏览器)
方法二：IE事件对象有一个属性returnValue，默认是true，当将其设置为false时，则可以取消事件默认行为，同样使用event对象调用。

JS支持事件吗

不支持，上边所说的DOM事件不属于JS的功能，属于浏览器提供的DOM的功能。
JS只是调用了DOM提供的addEventListener而已

手写事件委托例子

//错误版(bug在于如果用户点击的是li里边的span，就没法触发fn)
ul.addEventListener('click', function(e)){
    if(e.target.tagName.toLowerCase() === 'li'){
        fn();
    }
}
//高级版
function delegate(element,eventType,selector,fn){
    element.addEventListener(eventType, e=>{
         let el = e.target
         while(!el.matches(selector)){
             if(element === el){
                 el = null;
                 break;
             }
             el = el.parentNode
         }
         el && fn.call(el,e,el)
    })
}