事件冒泡、事件捕获、事件委托

什么是事件模型

从事件触发到执行完事件处理函数的过程

IE事件模型

事件处理和事件冒泡

var btn = document.getElementById('btn');
btn.attachEvent(‘onclick’, handler);
btn.detachEvent(‘onclick’, handler);

W3C标准事件模型

事件捕获-事件处理-事件冒泡

target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);

/**
  * 参数说明:
  * type指定事件类型(不要加on)
  * listener是事件处理函数
  * options 
        capture: Boolean  同useCapture
        once： 调用之后自动移除
        passive：Boolean  设置为true时表示listener不会调用preventDefault()。true能够提高滚动性能
  * useCapture， boolean值
	false - 注册程序在冒泡阶段触发
	true - 注册程序在捕获阶段触发
**/

事件委托

• 利用事件冒泡来优化同类事件。将子元素的事件交给document的绑定事件去处理。减少绑定事件的次数和所占用的内存。

不能冒泡的事件

focus blur load mouseenter mouseleave wheel 等等

阻止事件冒泡

event.stopPropagation