DOM事件与事件委托(重要)

捕获与冒泡

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

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

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

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)

JavaScript与HTML之间的交互是通过事件来实现的，事件就是文档或者浏览器窗口发生特定的交互瞬间。事件流是指从页面中接收事件的顺序。
捕获阶段：浏览器先检查元素的最外层祖先，查找是否有对应的监听函数(onclick事件处理程序)，如果是则运行它，如果不是则继续向里找，执行相同的操做，直至到达实际点击的元素。
冒泡阶段：浏览器首先检查被点击的元素，看是否有监听函数(onclick事件处理程序)。如果没有就向上移动到parentNode继续寻找，直至找到监听函数并运行。
W3C事件模型：先捕获再冒泡。
注意：e对象被传给所有的监听函数，事件结束后，原本的e对象就不存在了。所以在事件结束后不推荐继续使用e，因为e会被浏览器悄悄改变，要用的话应该提前把属性复制到自己的变量里。

target、currentTarget、取消冒泡

target vs currentTarget
区别：

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

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

特例：按照我们的经验，下边这段代码应该是先2后1，W3C标准模型，可事事实上呢，却是先1后2，因为这两个函数不是父元素和子元素的关系，他们是平级的。

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

如果真想要阻止滚动，可以阻止wheel和touchstart的默认动作。
注意：你还有找准滚动条所在的元素，但是滚动条还能用，可以css让滚动条display: none;或者overflow: hidden可以直接取消滚动条，但此时JS仍然可以修改scrollTop

自定义事件

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

事件委托

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

如果要给100个按钮添加点击事件怎么办？
答：监听者100个按钮的祖先，
如果想监听目前不存在的元素的点击事件怎么办？

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

封装事件委托

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

答案二：
上边这种说法看似正确
但是更严谨的办法是进行递归判断target的各个祖先元素。

如何阻止默认事件

方法一：直接使用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)
    })
}