jquery 事件对象属性小结


Posted in Javascript onApril 27, 2010

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

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

$("#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 + ", " + event.pageY ); });
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 ); last = event.timeStamp; });

上面是jQuery官方文档中提供的event对象的属性. 在”jQuery实战”一书中还提供了下面的多浏览器支持的属性, 时间关系我没有尝试每一个属性, 大家可以帮忙验证是否在所有浏览器下可用:

属性名称 描述
altKey Alt键是否被按下. 按下返回true
ctrlKey ctrl键是否被按下, 按下返回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 });
isPropagationStopped() 是否调用过  stopPropagation() 方法 $("p").click(function(event){ alert( event.isPropagationStopped() ); event.stopPropagation(); alert( event.isPropagationStopped() ); });
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来取消冒泡.

Javascript 相关文章推荐
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 #Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 #Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 #Javascript
JavaScript中常见陷阱小结
Apr 27 #Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 #Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 #Javascript
javascript 模式设计之工厂模式学习心得
Apr 27 #Javascript
You might like
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
php中常用编辑器推荐
2007/01/02 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
php中strtotime函数性能分析
2016/11/20 PHP
PHP的反射机制实例详解
2017/03/29 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
Python处理Excel文件实例代码
2017/06/20 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
建筑施工员岗位职责
2013/11/26 职场文书
采购部部长岗位职责
2014/02/06 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
房产遗嘱范本
2015/08/06 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
2016银行求职自荐信
2016/01/28 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
redis 限制内存使用大小的实现
2021/05/08 Redis
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers