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)
}
}
