DOM 事件机制

背景

最开始IE公司按照孙子->爸爸->爷爷的顺序看有没有函数监听；网景公司按照爷爷->爸爸->孙子顺序看有没有函数监听；谁也不服谁，然后W3C就发布了标准

2002年，W3C发布标准，文档名为：DOM level2 Events Specification,规定浏览器应该支持两种调用顺序，首先按照爷爷->爸爸->孙子顺序看有没有函数监听，然后按照孙子->爸爸->爷爷的顺序看有没有函数监听。有监听函数就调用，并提供事件信息，没有就跳过

捕获和冒泡

从外到内找监听函数的叫事件捕获，爷爷->爸爸->孙子

从内到外找监听函数的叫事件冒泡，孙子->爸爸->爷爷

执行过程就是：先捕获，再冒泡

addEventListener事件绑定API

IE5*：baba.attachEvent('onclick',fn) //冒泡

网景：baba.addEventListener('click',fn) //捕获

W3C统一：baba.addEventListener('click',fn,bool)

如果bool不传或为falsy：就让fn走冒泡，即当浏览器在冒泡阶段发现baba有fn监听函数，就会调用fn，并提供事件信息

如果bool为true：就让fn走捕获，即当浏览器在捕获阶段发现baba有fn监听函数，就会调用fn，并提供事件信息

例子：代码示例

取消冒泡

捕获不可以取消，但是冒泡可以，所有冒泡皆可取消，默认动作有的可以取消有的不能取消

e.stopPropagation() 可中断冒泡，浏览器不再向上走，通俗的说，有人打我，我自己解决，别告诉我老子

作用：一般用于封装某些独立的组件

例子:代码示例

自定义事件

创建自定义事件【event = new CustomEvent(typeArg, customEventInit);】

    xxx.addEventListener('click',()=>{ //xxx添加监听事件
        const event =new CustomEvent('frank',{ //创建自定义事件【*event* = new CustomEvent(*typeArg*, *customEventInit*);】
        detail:{name:'frank',age:18}, //可选的默认值是 null 的任意类型数据，是一个与 event 相关的值
        dubbles:true, // 一个布尔值，表示该事件能否冒泡。
        cancelable:false //一个布尔值，表示该事件是否可以取消
        })
        xxx.dispatchEvent(event) //向一个指定的事件目标派发一个[事件](https://developer.mozilla.org/zh-CN/docs/Web/API/Event),
})

事件委托

委托一个元素帮我监听我本来监听的事件

优点：省监听内存；可以监听动态元素；

例子：

场景一：你要给100个按钮添加点击事件，怎么办？监听这一百个按钮的祖先，等冒泡的时候判断target是不是这100个按钮中的一个;代码：代码示例

场景二：你要监听目前不存在的元素的点击事件，咋办？监听祖先，等点击的时候看看是不是我想要监听的元素即可代码：代码示例

DOM事件和事件委托