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 相关文章推荐
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
JS常见算法详解
Feb 28 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 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
BBS(php & mysql)完整版(三)
2006/10/09 PHP
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
Python实现计算最小编辑距离
2016/03/17 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
PyQt5实现拖放功能
2018/04/25 Python
详解如何减少python内存的消耗
2019/08/09 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
python中time、datetime模块的使用
2020/12/14 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
公路绿化方案
2014/05/12 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers