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实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 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
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
高级3D打印市场:Gambody
2019/12/26 全球购物
政治思想表现评语
2014/05/04 职场文书
入党团支部推荐意见
2015/06/02 职场文书
酒店开业主持词
2015/07/02 职场文书
销售人员管理制度
2015/08/06 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript