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 相关文章推荐
jQuery 性能优化指南(3)
May 21 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
关于vue-router路径计算问题
May 10 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 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 empty函数 使用说明
2009/08/10 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
JS中的三个循环小结
2017/06/20 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
python获取本机外网ip的方法
2015/04/15 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
校运会口号
2014/06/18 职场文书
公司人事任命通知
2015/04/20 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL