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对象的父元素将不会收到这个冒泡事件。
示例:
<div class="layer0" style="100px;height:100px;margin:10:px; background:#0062CC">
<div class="layer1" style="80px;height:80px;;margin:10:px;background:#2AC845;">
<div class="layer2" style="60px;height:60px;;margin:10:px;background:#007AFF;"></div>
</div>
</div>
<script>
$(function(){
$(".layer0").click(function(e){
console.log("layer0 dtest:"+e.originalEvent.test);
});
$(".layer1").click(function(e){
console.log("layer1 dtest:"+e.originalEvent.test);
});
$(".layer2").click(function(e){
e.originalEvent.test = "mouse click";
});
$(".layer2").click(function(e){
console.log("layer2 dtest:"+e.originalEvent.test);
});
let event = $.Event("click");
event.originalEvent = {test: "trigger"};
$(".layer2").trigger(event);
}):
</script>
页面加载完成之后输出:
layer2 dtest:trigger
layer1 dtest:trigger
layer0 dtest:trigger
鼠标点击layer2之后输出
layer2 dtest:mouse click
layer1 dtest:mouse click
layer0 dtest:mouse click