事件与事件对象（四）
七、使用jquery对象

使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导
致我们很难跨浏览器使用事件对象.

jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQuery格式化后的事件对象作为唯一参数传
入:

1 $("#testDiv").bind("click", function(event) { });

关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events/jQuery.Event

jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者(在IE中使用原生的事件对象, 需要访问event.srcElement).

下面是 jQuery 事件对象可以在扩浏览器支持的属性:

属性名称 描述举例type

事件类型.如果使用一个事件处理函数来处理多
个事件, 可以使用此属性获得事件类型,比如
click.

$("a").click(function(event) {
alert(event.type);
});

target

获取事件触发者DOM对象

$("a[href=http://google.com]").click(function(event)
alert(event.target.href);
});

data

事件调用时传入额外参数.

$("a").each(function(i) {
$(this).bind('click', {index:i}, function(e){
alert('my index is ' + e.data.index);
});
});

relatedTarget

对于鼠标事件, 标示触发事件时离开或者进入
的DOM元素

$("a").mouseout(function(event) {
alert(event.relatedTarget);
});

currentTarget

冒泡前的当前触发事件的DOM对象, 等同于
this

$("p").click(function(event) {
alert( event.currentTarget.nodeName );
});
结果:P

pageX/Y

鼠标事件中, 事件相对于页面原点的水平/垂直
坐标.

$("a").click(function(event) {
alert("Current mouse position: " + event.pageX + ", "
});

result

上一个事件处理函数返回的值

$("p").click(function(event) {
return "hey"
});
$("p").click(function(event) {
alert( event.result );
});
结果:"hey"

timeStamp事件发生时的时间戳.

var last;
$("p").click(function(event) {
if( last )
alert( "time since last event " + event.timeStamp);
last = event.timeStamp;
});

?

上面是jQuery官方文档中提供的event对象的属性. 在"jQuery实战"一书中还提供了下面的多浏览器支持的属性, 大家可以验证是否在所有浏览器下可用:

属性名称描述?altKey Alt键是否被按下. 按下返回true ?ctrlKeyctrl 键是否被按下, 按下返回true ?metaKey

Meta键是否被按下, 按下返回true.
meta键就是 PC机器的Ctrl 键,或者Mac 机器上面的Command
键

?shiftKey Shift键是否被按下, 按下返回true ?keyCode

对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.
对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠.

?which

对于键盘事件, 返回触发事件的键的数字编码. 对于鼠标事件, 返回鼠标按键号(1左,2中,3右).

?screenX/Y对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标?

?

事件对象除了拥有属性, 还拥有事件. 有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等.

下面是jQuery事件对象的函数列表:

名称说明举例preventDefault()

取消可能引起任何语意操作的事件. 比如元素的href链接加载, 表单提交以及click引起复选框的状态切
换.

$("a").click(function(event){
event.preventDefault();
// do something
});

isDefaultPrevented()

是否调用过 preventDefault() 方法

$("a").click(function(event){
alert( event.isDefaultPrevented() );
event.preventDefault();
alert( event.isDefaultPrevented() );
});

stopPropagation()取消事件冒泡

$("p").click(function(event){
event.stopPropagation(); )

// do something
});

stopImmediatePropagation()

取消执行其他的事件处理函数并取消事件冒泡.
如果同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其他的事件处理函数.

$("p").click(function(event){
event.stopImmediatePropagation();
});
$("p").click(function(event){
// This function won't be executed
});

isImmediatePropagationStopped()

是否调用过
stopImmediatePropagation(
)
方法

$("p").click(function(event){
alert( event.isImmediatePropagationStopped());

event.stopImmediatePropagation();
alert( event.

isImmediatePropagationStopped());

});

?

这些函数中 stopPropagation() 是我们最长用的也是一定会用到的函数. 相当于操作原始event 对象
的event.cancelBubble=true来取消冒泡.