JQuery中的事件对象详解
来源:互联网 发布:淘宝焦点图 编辑:程序博客网 时间:2024/05/21 07:00
在js中,有window.event 来操作事件对象,但其不能跨浏览器,故Jquery对其进行了封装,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实战”一书中还提供了下面的多浏览器支持的属性, 时间关系我没有尝试每一个属性, 大家可以帮忙验证是否在所有浏览器下可用:
属性名称描述举例altKeyAlt键是否被按下. 按下返回true ctrlKeyctrl键是否被按下, 按下返回true metaKeyMeta键是否被按下, 按下返回true.meta键就是PC机器的Ctrl键,或者Mac机器上面的Command键 shiftKeyShift键是否被按下, 按下返回true keyCode对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠. which对于键盘事件, 返回触发事件的键的数字编码. 对于鼠标事件, 返回鼠标按键号(1左,2中,3右). screenX/Y对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标
事件对象除了拥有属性, 还拥有事件. 有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等.下面是jQuery事件对象的函数列表:
名称说明举例preventDefault()
取消可能引起任何语意操作的事件. 比如<a>元素的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来取消冒泡.
- JQuery中的事件对象详解
- jQuery学习第五课(jquery中的事件和事件对象)
- JQuery的event事件对象详解
- jQuery事件-事件对象
- JQuery中的事件 (五.事件对象的属性)
- JavaScript中的Event事件对象详解
- 详解小程序事件对象中的参数
- jQuery-jQuery中的事件
- jQuery事件与事件对象
- jQuery事件与事件对象
- jQuery事件与事件对象
- jquery事件与对象
- jquery事件对象属性
- jquery事件对象属性
- jquery事件对象属性
- jquery事件对象属性
- 9.jQuery 事件对象
- jQuery--事件对象
- android dialog用法
- hadoop ssh 自动登录
- Android 获取手机号及运营商信息
- php去除空格、制表符、换页符
- 记第七届ACM校赛-回忆
- JQuery中的事件对象详解
- SQL Server2005杂谈(1):使用公用表表达式(CTE)简化嵌套SQL
- Hibernate读书笔记-----SQL查询 addScalar()或addEntity()
- android 软件覆盖安装引发的问题
- 打工,才是最愚蠢的投资!~
- code engine
- hdu 1565 状态压缩 dp
- 解决struts2配置文件无提示问题
- 如何简单部署用VSTO SE 2005开发的Excel,Word插件