前端，DOM事件模型,DOM事件机制

前言：DOM事件是用户或者浏览器自己执行的某种动作，是文档或者浏览器发生的一些交互瞬间，比如点击（click）按钮等，这里的click就是事件的名称。JS与html之间的交互是通过事件实现的，DOM支持大量的事件。DOM 事件模型这个知识点，是常考的知识点之一。

点击事件:

<div class="爷爷"> <div class="爸爸"> <div class="儿子"> 文字 </div> </div> </div>

即.爷爷>.爸爸>.儿子

给三个 div 分别添加事件监听fnYe/fnBa

那么此事产生一个问题：点击了谁？，点击文字，算不算点击儿子？点击文字，算不算点击爸爸？点击文字，算不算点击爷爷？

答案：都算

那么再问：点击文字：最先调用fnYe/fnBa/fnEr中的哪一个函数？

答案：都行，IE 5先调用fnEr，网景先调用fnYe。

于是此时两家浏览器厂商发生了争执，IE 5认为先调用fnEr，网景认为先调用fnYe，2002年，W3C发布标准平息了两家的争论，发布了标准，文档吗为DOM Level2 Events Specification，规定浏览器应该同时支持两种调用顺序。首先按爷爷=>爸爸=>儿子顺序看看有没有函数监听，然后按儿子=>爸爸=>爷爷顺序看看有没有函数监听，有函数监听就调用，并提供事件信息，没有就跳过。

术语：

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

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

此时产生了个疑问：那岂不是fnYe/fnBa/fnEr都调用两次？非也！

开发者自己选择把fnYe放在捕获阶段还是放在冒泡阶段

​

事件绑定API:

baba.attachEvent('onclick', fn)//IE5:事件冒泡 baba.addEventListener('click', fn)//网景:事件捕获 baba.addEventListener('click', fn, bool)//W3C:如果bool不传或为falsy, 则fn使用事件冒泡, 反之则fn使用事件捕获.

如果bool不传或为falsy就让fn走冒泡，即当浏览器在冒泡阶段发现baba有监听函数 就会

fn 并提供事件信息

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