浅谈JavaScript事件之捕获、命中和冒泡

DOM事件的行为

捕获阶段(capture phase):从最上层元素, 直到最下层(点击的target)元素
命中阶段(target phase):如果该事件成功到达了target元素,它会进行事件处理
冒泡阶段(bubbling phase):事件从最外层向上传递,依次触发父元素的该事件处理函数

DOM标准中,定义了一系列的JavaScript事件,以及事件接口.其中,DOM Level 0 Event提供了类似onclick的属性来支持事件,DOM Level 2 Event提供了addEventListener,removeEventListener,dispatchEvent,还有IE9的attachevent

这两种事件处理模型的区别:

前者(onclick)是一次性的事件处理,而且是通过操作DOM元素的属性来完成的,因此只能绑定一个处理函数
后者(addEventListener)更加高级,不仅可以添加多个事件处理函数,还支持事件捕获

DOM Level 0 Event

DOM Level 0 Event从Netscape浏览器开始就有支持,最初是通过在HTML中写入onclick属性来完成事件绑定:

<div onclick="test()">
    onclick
</div>
<script>
    function test(){}
</script>

后来随着Web技术的进步,可以在JavaScript定义并且绑定事件了.此后可以做到事件处理和页面展示的分离,在不支持JavaScript的浏览器中,以及搜索引擎来看,页面变得更加兼容:

document.getElementById("test").onclick = function(){}

当然,也存在着一些问题,后一次时间绑定会使得前一次事件绑定失败

addEventListener

2000年11月，W3C发布了DOM (Document Object Model) Level 2 Event，提供了更复杂的事件处理模型：

el.addEventListener("click",func,false)

在版本小于9的IE中,通过attachEvent来添加事件处理函数,然而从IE11开始,attachevent已经不受支持

通过addEventListener添加任意多个事件处理函数,第三个参数用来设置是否捕获来自子元素的事件,默认值为false

el.addEventListener("click",function(){},true)
el.addEventListener("click",function(){},true)

这两个事件都会执行

removeEventListener

DOM Level 2 Event还提供了removeEventListener(type,listener[,useCapture])方法,用来移除事件处理函数.callback是必选参数.capture的默认值为false

如果同一监听事件分别为"事件捕获"和"事件冒泡"注册了一次,一共2两次,这两次事件需要分别移除,两者不会相互干扰

var div = document.getElementById("div")
var listener = function (event){}
div.addEventListener("click",listener,false)
div.removeEventListener("click",listener,false)

捕捉与冒泡

最开始已经给出了事件处理的三个阶段:捕获、目标、冒泡.使用addEventListener第三个参数为true则为添加捕获阶段的事件处理函数,否则为添加冒泡阶段的事件处理函数

如果当前对象就是目标对象本身时,添加的事件处理函数只在目标阶段起作用,第三个参数无效

DispatchEvent

target.DispatchEvent(event)用来从target开始分发事件event.例如,我们可以创建一个click DOM事件:

var event = new MouseEvent("click",{ 
    view:window, 
    bubbles:true, 
    cancelable:true
})
balabala.dispatchEvetne()

jquery Event 源码

jquery中的bind,delegate,live等都是通过.on()来实现的,来看声明:

.on(events[,selector][,data],handler)

events可以是多个事件,空格分隔
如果指定了selector,当前事件处理函数将会代理源于selector的事件
如果指定了data,它将会通过event.data传递

add: function(elem,types,handler,data,selector){ 
     ...
     if(elem.addEventListener){ 
      elem.addEventListener(type,listener,false)
     } 
     ...
     }

在较低的版本中,jquery对IE进行一些支持:

if(elem.addEventListener){
      elem.addEventListener(type,eventHandle,false)
}else if(element.attachEvent){
      element.attachEvent("on"+type,eventHandle)
}

值得注意的是,jquery的on方法实现中,addEventListener的第三个参数总是false,及jquery事件代理是借助事件冒泡实现的,并没有使用事件捕捉机制

与on想对的off,它的声明为:

.off(events[,selector][,handler])

off方法调用removeEventListener方法来移除事件处理函数:

jQuery.removeEventm = funciton(elem,type,handle){
     if(elem.removeEventListener){
        elem.removeEventListener(type,listener,false)
      }
}