《简述 DOM 事件模型/机制与事件委托》

一、DOM事件模型/机制

示例代码：

文字

       

即：.爷爷>.爸爸>.儿子, 给3个div分别添加事件监听fnYe/fnBa/fnEr
即：点击父元素也算点击子元素，相反也一样。

在调用顺序上网景与IE有不同，在“W3C”2002年发布标准后规定浏览器同时支持两种调用顺序。
首先按爷爷>爸爸>儿子顺序看有没有函数监听，然后按儿子>爸爸>爷爷顺序看有没有函数监听。
这2种顺序用专业术语来说分别就是DOM事件模型的事件捕获和事件冒泡。
一个事件发生后，会在子元素和父元素之间传播（propagation）
由外向内找监听函数叫事件捕获；
由内向外找监听函数叫事件冒泡。

事件绑定API addEventListener

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

target 与 currentTarget 区别

e.target 是用户操作的元素，e.currentTarget 是程序员监听的元素。

取消冒泡

捕获不能取消，冒泡可以 e.stopPropagation(), 中断冒泡。

阻止默认动作

使用event.preventDefault()可以取消默认事件。

二、事件委托

原理：DOM元素的事件冒泡

事件委托是JavaScript中常用绑定事件的常用技巧，也叫事件代理(Event Delegation)，顾名思义，“事件委托”是把原本需要绑定在子元素的响应事件(click、keydown...)委托给父元素，让父元素担当事件监听的职务。

事件委托的优点

(1) 可以节省内存占用，减少事件注册（比如在ul上代理所有li的click事件）

示例

如上面代码所示，如果给每个

列表项都绑定一个函数，那对内存的消耗是非常大的，因此较好的解决办法就是将

元素的点击事件绑定到它的父元素

身上，执行事件的时候再去匹配判断目标元素。

(2) 可以监听动态元素（监听目前不存在的元素的点击事件）

假设上述的例子中列表项

• 就几个，我们给每个列表项都绑定了事件。
  在很多时候，我们需要通过用户操作动态的增加或者删除列表项li元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件。
  如果用事件委托就没有这种麻烦，因为事件是绑定在父层，和目标元素的增减没有关系，执行到目标元素是在真正响应执行事件函数的过程中匹配的，所以使用事件在动态绑定事件的情况下可以减少很多重复性的工作。

  实现方法：

  一、可用addEventListener()   //所有主流浏览器，除了IE8及更早IE版本

  1.语法：
  element.addEventListener(event,function,useCapture)；
  event：必须。字符串，指定事件名。 不加'on'，如click
  function：必须。指定要事件触发时执行的函数。
  useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行(true-事件句柄在捕获阶段执行；false-默认。事件句柄在冒泡阶段执行)。
  2.移除事件监听：
  element.removeEventListener(event,function,useCapture)。移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除。
  3.功能：
  可多次绑定同一个事件，并且不会覆盖上一个事件。

  二、attachEvent()   //IE8及IE更早版本

  1.语法：
  element.attachEvent(event,function)；
  （1）event事件加'on'，onClick
  （2）没有第三个参数，因为IE只有冒泡，没有反向冒泡
  （3）执行顺序按照绑定的反序（先执行后绑定的方法）
  2.移除事件监听：
  element.detachEvent(event,function)

  封装事件委托