jquery Event对象的属性和方法
currentTarget
当前的dom对象
data
绑定事件处理器时设置的数据:
target.on("click", {value:“this is data”}, function(e){
console.log(e.data.value);
});
输出: this is data
delegateTarget
使用delegate方法绑定的dom元素
isDefaultPrevented()
是否调用了preventDefault()
isImmediatePropagation()
是否调用了stopImmediatePropagation()
isPropagationStopped()
是否调用了stopPropagation()
namespace
事件的namespace
pageX
相对于document页面右上角x轴坐标
pageY
向对应document页面右上角y轴坐标
preventDefault()
阻止事件的默认行为
relatedTarget
与事件相关联的dom对象,
result
当在同一个dom对象,同一个事件绑定多个处理函数,jquery会把前一个处理函数的返回值设置到event的result属性上,然后传递到下一个处理函数。
topImmediatePropagation()
停止事件冒泡,并不再调用这个dom事件上绑定的候选处理函数。
stopPropagation()
停止事件冒泡
target
触发事件的dom对象
timeStamp
事件触发的时间戳
type
事件类型,如: click, dbclick等。
which
表示鼠标或键盘的键
originalEvent
浏览器原始的事件对象
事件处理函数中收的jquery的事件是只读:
target.click(functon(e){
e.result = "test";
});
target.click(function(e){
console.log(e.result);
});
输出: undefined
单如果事件的属性是object类型的,是可以修改这个这个object的属性的:
target.click(functon(e){
e.originalEvent.test = "event data";
});
target.click(function(e){
console.log(e.originalEvent.test);
});
输出: event data
事件的绑定和解绑
jquery提供了3组方法实现事件的绑定和解绑:
on(event, [selector], [data], fn)/off(event, [selector], [fn]) 只要能够匹配selector的dom对象都会绑定这个事件,即使dom对象是on函数调用之后添加的。
bind(event, [data], fn)/unbind(event, [fn]) 和on不同,bind只能对之前已经存在的dom起作用。
one(event, [data], fn) 和bind大致一样,不同的是只触发一次就会自动unbind
事件触发
事件除了通过输入设备触发以外,还可以通过程序触发。
trigger(event, [data]) 触发事件
trigggerHandler(event, [data]) 触发事件。和trigger的不同是:不能触发浏览器默认事件, 不会执行浏览器的默认处理动作。只触发jquery对象集合中第一个元素的事件,且触发的事件不会冒泡。
事件冒泡
事件冒泡是指,当一个dom对象上触发了一个事件。这个事件会沿dom树向上传递,直到root对象为止。在事件冒泡传递过程中,默认情况下任何在冒泡路径上绑定的该事件的处理函数都会被调用。如果有一个dom对象上的事件处理函数调用事件对象的stopPropagation()方法停止了事件的冒泡行为,那么这个dom对象的父元素将不会收到这个冒泡事件。
示例:
页面加载完成之后输出:
layer2 dtest:trigger
layer1 dtest:trigger
layer0 dtest:trigger
鼠标点击layer2之后输出
layer2 dtest:mouse click
layer1 dtest:mouse click
layer0 dtest:mouse click