jquery事件

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="width:100px;height:100px;margin:10:px; background:#0062CC">

<div class="layer1" style="width:80px;height:80px;;margin:10:px;background:#2AC845;">

<div class="layer2" style="width: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