jQuery Event对象的属性和方法

介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是通过jQuery方法绑定的,就不需要进行转换了!

jQuery在遵循W3C规范的情况下,对事件的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断。

1.event.type属性
该方法作用是可以获取到时间的类型

1
2
3
4
$( "a" ).click( function (event){
     alert(event.type);  //获取时间类型
     return  false //阻止链接跳转
})

 以上代码运行后会返回:“click”。

2.event.preventDefault()方法
该方法的作用是阻止默认的事件行为。JavaScript中符合W3C规范的preventDefault()方法在IE浏览器中无效。jQuery对其进行了封装,使之能兼容各种浏览器。

3.event.stopPropagation()方法
该方法是阻止事件的冒泡。JavaScript中符合W3C规范的stopPropagation()方法在IE浏览器中无效。jQuery对其进行封装,使之能兼容各种浏览器。

4.event.target属性
event.target属性的作用是获取到出发事件的元素。jQuery对其封装后,避免了W3C、IE和safari浏览器不同标准的差异。

1
2
3
4
$( "a[href=http://www.jb51.net]" ).click( function (event){
     alert(event.target.href);  //获取触发事件的<a>元素的href属性值
     alert(event.target.tagName);  //获取触发事件的元素的标签名称
     return  false //阻止链接跳转})

 5.event.relatedTarget属性
在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target()方法来访问,相关元素是通过event.relatedTarget属性来访问的。event.relatedTarget属性在mouseover中相当于IE浏览器的event.fromElement属性,在mouseout中相当于IE浏览器的event.toElement,jQuery对其进行了封装,使之能兼容各种浏览器。

6.event.pageX/event.pageY属性
该方法的作用是获取到光标相对页面的x坐标和y坐标。如果没有使用jQuery时,那么IE浏览器中是用event/event.y方法,而在Firefox浏览器中用event.pageX/event.pageY方法。如果页上有滚动条,则还要加上滚动条的宽度和高度。在IE浏览器中还应该减去默认的2px的边框。

1
2
3
4
5
6
7
$( function () {
     $( "a" ).click( function (event) {
         alert( "Current mouse position:"  + event.pageX +  ","  + event.pageY);
         //获取鼠标当前相对于页面的坐标
         return  false //阻止链接跳转
     });
})

 7.event.which属性
该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键;在键盘事件中获取键盘的按钮。

1
2
3
4
5
$( function () {
     $( "body" ).mousedown( function (e) {
         alert(e.which);  //1 = 鼠标左键;2 = 鼠标中键;3 = 鼠标右键。
     })
})

 以上代码加载到页面中,用鼠标单击页面时,单击左、中、右键分别返回1、2、3.

8.event.metaKey属性
针对不同浏览器对键盘中的<ctrl>按键解释不同,jQuery也进行了封装,并规定event.metaKey()方法为键盘事件中获取<ctrl>按键。

9.event.originalEvent属性。
该方法的作用是指向原始的事件对象。

"唯有高屋建瓴,方可水到渠成"



jQuery的Event对象用于表示当前文档元素触发的DOM事件,它对JS原生的Event对象进行了封装,从而实现跨浏览器的兼容。

该对象主要用于获取事件的相关信息,或对该事件进行处理。

注意:除了下列属性和方法外,jQuery的Event对象还具备JS原生Event对象的属性和方法。

Event 对象的属性

属性 初始版本 描述
currentTarget 1.3 返回事件冒泡阶段中的当前DOM元素。
data 1.1 返回绑定事件时传入的附加数据。
delegateTarget 1.7 返回"受委托"调用当前事件处理函数的DOM元素。
metaKey 1.0.4 指示触发事件时是否按下了Meta键。
namespace 1.4.3 返回触发事件时指定的命名空间。
pageX 1.0.4 返回鼠标相对于当前文档的x坐标。
pageY 1.0.4 返回鼠标相对于当前文档的y坐标。
relatedTarget 1.1.4 返回事件涉及到的其它DOM元素。
result 1.3 返回当前事件绑定的上一个事件处理函数的返回值。
target 1.3 最初触发该事件的DOM元素。
timeStamp 1.2.6 返回事件触发的当前时间与1970年1月1日午夜之间的毫秒数。
type 1.0 返回事件的类型。例如:"click"、"focus"等。
which 1.1.3 返回触发事件时按下的鼠标按钮或键盘按键。

Event 对象的方法

方法 初始版本 描述
isDefaultPrevented() 1.3 是否调用了preventDefault()方法。
isImmediatePropagationStopped() 1.3 是否调用了stopImmediatePropagation()方法。
isPropagationStopped() 1.3 是否调用了stopPropagation()方法。
preventDefault() 1.0 阻止触发事件的默认行为。
stopImmediatePropagation() 1.3 阻止该元素当前触发事件剩余的事件处理函数的执行,并停止事件的冒泡传递。
stopPropagation() 1.0 停止事件的冒泡传递。
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值