举例说明

通过一个简单的例子来理解下Dom事件模型。

<div class=yeye>
    <div class=baba>
        <div class=erzi>
           文字
        </div>
    </div>
</div>

现在给每个div都添加一个监听事件，然后点击文字，会执行三个函数。那么执行函数的顺序什么呢？

2002年，W3C发布标准，规定浏览器应该同时支持两种调用顺序。

1. 首先是从爷爷=>爸爸=>儿子看有没有函数监听
2. 然后从儿子=>爸爸=>爷爷看有没有函数监听
3. 有监听函数就调用，并提供事件信息，没有就会跳过。

爷爷=>爸爸=>儿子 那么这种由外向内找监听函数的过程叫事件捕获

儿子=>爸爸=>爷爷 那么这种由内到外找监听函数的过程叫事件冒泡

那一来一回会调用相同函数两次吗？ 其实我们可以自己选择在捕获阶段执行还是在冒泡阶段执行。

addEventListener

事件绑定Api

事件机制

IE div.attachEvent('onclick',fn) //冒泡
W3C div.addEventListener('click',fn,bool) // 默认冒泡 可设置bool  bool值不传或为falsy时，会在冒泡阶段调用  bool值为true 会在捕获阶段调用

target 和 currentTarget

event.target 是指用户点击的元素

event.currentTarget 是指监听的元素。当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素。

事件委托

委托一个元素进行监听A元素，来监听本该A元素监听的监听事件。

1. 在一个div下有非常多的元素，需要全部有监听事件。问题是全部添加监听事件会很占用内存。那么可以在div上监听，并判断用户点击的元素。

2. 在一个div下没有元素，在添加元素后需要给这个元素添加点击事件。问题是这个元素还没有，无法直接获取添加事项，那么也可以通过监听原本需要直接监听的这个元素的祖先元素div，来判断是否点击了这个元素。