jquery 事件对象属性小结


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

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() 取消可能引起任何语意操作的事件. 比如<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来取消冒泡.



相关阅读:
使用ASP.NET一般处理程序或WebService返回JSON的实现代码
用PHP的ob_start();控制您的浏览器cache!
语义化H1标签
js退弹 IE关闭时弹出广告代码,可以防止屏蔽
符合web标准的网页中调用Flash的方法
js同时按下两个方向键
JQuery扩展插件Validate—6 radio、checkbox、select的验证
最有影响力15个开源软件人士引起争议
PHP网站基础优化方法小结
PHP中通过ADO调用Access数据库的方法测试不通过
Server对象之HTMLEncode方法
“windows正在启动”画面停留时间长的原因及解决办法
js实现双击单元格变成文本输入框效果代码
一个非常强大完整的web表单验证程序(2)
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 樱花树下是谁带走那片思念 汇报演出主持词 日常乐事经典调侃幽默笑料短信 散文:夏日之旅(五):哈尔滨印象 放下执念,许一片淡蓝的晴空 大学生感人毕业留言 初中初一作文750字:走象棋 下辈子还做你的“女儿”作文900字 《做一个有道德的人》读后感作文500字 我的生日真开心100字 伟大的“一二.九”运动作文1000字 11路,赴一场暖心之约 光明正大“偷东西”400字 我自豪作文300字 我眼中的太阳作文700字 迎教师节红领巾广播稿 并不遥远的星空 名侦探柯南之日本旅行之幻想篇(一)作文700字 2013建筑业年度工作总结 散文随笔:菲律宾这个瘪三可真窝囊透了(康有山) 移民推荐信的标准格式 让光辉的旗帜引领青春前行 为了不能忘却的纪念 健康美食倡议书_倡议书 产业工人祖国发展我成长征文 知道自己能做什么,比想做什么更重要 凿壁 只要和你在一起,每一天都是情人节 思念如何化成水 关于游黄山的小学生作文_黄山一日游 党校干部培训班自我鉴定 生命的支柱 实习报告前言范文 小学生快乐的万圣节作文 小学五年级作文500字:校园里的秋叶 我,50元,就卖! 身边人,最好的名片 服装导购员工作简历模板 支部书的述职报告 走群众路线做好牧羊人的官 小学四年级作文550字:电脑的自述 《阿长与〈山海经〉》课堂实录 似花年华*似水流年 九月菊450字 人教英语新课标必修3全册精品教案(Unit 5 Canada—“The True North”) 过去回不去 吉克隽逸的成长 夏县中学赋 景阳冈轶事作文700字 如果,可以重新来过

Copyright © 2016 phpStudy |