下面是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来取消冒泡.
分享到:
相关推荐
使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用...jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target
如何阅读本书 本书共分为四大部分,首先介绍了jQuery的总体架构,然后分别分析了构造jQuery对象模块、底层支持模块和功能模块的源码实现。在阅读本书时,首先建议读者建立一个源码阅读和调试环境,在阅读过程中...
使用标准化的deltaX和deltaY属性更新事件对象。 此外,事件对象上还有一个名为deltaFactor的新属性。 将deltaFactor乘以deltaX或deltaY可获得浏览器报告的滚动距离。 这是同时使用bind和helper方法语法的示例: /...
控制jQuery对象 jQuery控制CSS样式 第2章 使用JavaScript实现隔行变色 使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用...
并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jquery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生...
* .target 这个反应触发事件的DOM对象,可以在事件冒泡的时候判断是否是事件源头(compare event.target to this) * .pageX: 鼠标的left属性,相对于page * .pageY: 鼠标的top属性,相对于page * preventDefault
进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部构造过程;接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support...
几乎不建议使用功能检测,但是,如果您需要知道什么浏览器和哪个版本,将重新引入$ .browser对象,该对象将返回所有浏览器属性: 前任: var txt = '' +'jQuery.browser.ua = '+jQuery.browser.ua+' ' +'...
此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样使得Web后端开发者如虎添翼,使用少量代码就可以实现复杂的功能。特别是新版本1.4.x的发布,jQuery在功能和性能方面都有质的提升,极大...
jQuery则通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象. 3.实现丰富的UI jQuery可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以渐变效果为例, 从前我...
超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的...11.30 缓存jQuery对象以提升性能 11.31 使用find()函数提升子查询的性能 11.32 使用jQuery操作DOM的限制
第十一节:jQuery速成 - 元素属性的设置与移除 第二章:进阶篇 - 对象的筛选 第十二节:jQuery速成 - 过滤 第十三节:jQuery速成 - 查找 第十四节:jQuery速成 - 串联 第三章:文本篇 - 对象文本处理 第十五节:...
一个jQuery插件,添加跨浏览器鼠标滚轮支持 jQuery 鼠标滚轮插件 一个 jQuery 插件,通过增量标准化添加跨浏览器鼠标滚轮支持。 为了使用插件,只需将鼠标滚轮事件绑定到一个元素。 它还提供了两个名为 mousewheel...
进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部构造过程;接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support...
jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中: 实例 ...
2.2 jQuery 对象访问 22 2.2.1 each(callback) 22 2.2.2 size() 23 2.2.3 length 24 2.2.4 selector 24 2.2.5 context 25 2.2.6 get() 25 2.2.7 get(index) 25 2.2.8 index([subject]) 26 2.3 数据缓存 27 2.3.1 ...
注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。 url (String) : (默认: 当前页地址) 发送请求的地址。 示例 加载并执行一个 JS 文件。 jQuery 代码: $.ajax({ type: "GET", ...
第三方: 除了浏览器自带的函数和程序员自己编写的函数外,由第三方组织或个人编写的函数或对象——都要先下载才能用(官网: www.jquery.com) (2). 执行DOM操作: jQuery还是在执行DOM的增删改查操作。学习jQuery...
进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部构造过程;接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support...
最近因项目需要,要用jquery的cycle插件,但是项目里面一直用的都是jquery1.9,不支持browser对象,百度一下,找到了解决方案。 在cycle插件的源码里面直接加上下面这段代码就可以了: 代码如下: (function(jQuery){...