事件冒泡以及事件捕获

事件模型

 

JavaScript中的两种事件模型：DOM0，DOM2。

 

DOM0级事件模型

DOM0级事件模型是早期的事件模型，所有的浏览器都支持。

注册事件：在事件类型前面加on，如：onclick、onmouseover ......

解除事件：dom.onclick = null;

每个DOM对象只能注册一个相同类型的事件，注册多个则会发生覆盖，只执行最后一个事件函数。

 

DOM2级事件模型

DOM2级事件模型是较新的事件模型，IE8及以下是不支持的。

注册事件：

addEventListener(type,fn,useCapture) 事件监听器

参数：type----事件类型，例：click

          fn----事件处理函数

          useCapture----布尔值true或false

         ( true表示事件捕获，false表示事件冒泡 )

为了兼容浏览器，第三个参数一般设置为false

解除事件：removeEventListener(type, fn, useCapture)

每个DOM对象可以注册多个相同类型的事件，不会发生覆盖，会依次的执行各个事件函数。

 

因为IE只支持事件冒泡，不支持事件捕获，所以它也不支持addEventListener( )方法

IE提供了另一个函数attachEvent( type , fn )

参数：type----事件类型，例：onclick

          fn----事件处理函数

          没有第三个参数

解除事件：detachEvent( type , fn )

 

封装事件监听函数（兼容）

 

 

事件流

 

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

 

当子元素和父元素都定义了相同的事件，比如都定义了onclick事件，

点击子元素时，父元素的onclick事件也会被触发。

 

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

 

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

 

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

 

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

 

 

不管是事件冒泡，还是事件捕获，都有传播的特征！

 

阻止事件传播

event.stopPropagation()  // W3C

event.cancelBubble = true  // IE

event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

 

 

事件委托

 

什么是事件：通俗讲onclick，onmouseover，onmouseout等就是事件。

什么是委托：就是这个事件本来是加在某些元素上的，而你却加到其他元素上来完成这个事件。

 

原理：利用事件传播的特征。

具体来说，事件委托就是事件目标自身不处理事件，而是把处理事件委托给其父元素，甚至是document 来完成。

 

优点：

1. 提高性能和效率

2. 减少事件注册，节省内存占用

3. 未来元素无需再次注册事件

......

 

 

鼠标滚轮事件

 

在非火狐浏览器中

鼠标滚轮事件：onmousewheel

示例：

box.onmousewheel=function (ev){

     var event=ev||window.event;

     alert(event.wheelDelta);

};

 

 

在火狐浏览器中

鼠标滚轮事件：DOMMouseScroll

示例：

box.addEventListener('DOMMouseScroll',function (ev){

     alert(ev.detail);

},false)