JS - 事件模型 - 事件流

一、事件模型

JavaScript 中事件模型有两种：DOM0级，DOM2级

1. DOM0级事件模型
   DOM0级事件模型是早期的事件模型，所有浏览器都支持。
   注册事件：在事件类型前面加on，如：onclick、onmouseover …
   解除事件：dom.onclick = null;
   每个DOM对象只能注册一个相同类型的事件，注册多个则会发生覆盖，只执行最后一个事件函数。
2. DOM2级事件模型
   DOM2级事件模型是较新的事件模型，IE8及以下是不支持的。
   addEventListener(type,fn,useCapture) 事件监听器
   参数：type----事件类型，例：click、mouseover…
   fn----事件处理函数
   useCapture----布尔值true或false
   ( true表示事件捕获，false表示事件冒泡 )
   为了兼容浏览器，第三个参数一般设置为false
   解除事件：removeEventListener(type, fnName, useCapture)
   每个DOM对象可以注册多个相同类型的事件，不会发生覆盖，会依次的执行各个事件函数。

因为IE678只支持事件冒泡，不支持事件捕获，所以它也不支持addEventListener( )方法
IE提供了另一个函数attachEvent( type , fn )
参数：type----事件类型，例：onclick、onmouseover
fn----事件处理函数
没有第三个参数
解除事件：detachEvent( type , fn )

二、事件流

• 事件流：事件的流向，事件的执行顺序。

当子元素和父元素都定义了相同的事件，比如都定义了onclick事件，
点击子元素时，父元素的onclick事件也会被触发。

• JS里称这种事件连续发生的机制为事件冒泡或者事件捕获。

• IE：事件从里向外发生，事件从最精确对象(target)开始触发，然后到最不精确的对象(document)触发，即事件冒泡

• 网景：事件从外向里发生，事件从最不精确的对象(document)开始触发，然后到最精确对象(target)触发，即事件捕获

W3C将两者进行中和，在任何W3C的事件模型中，事件先进入捕获阶段，再进入冒泡阶段。