jquery 事件对象属性小结

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实战”一书中还提供了下面的多浏览器支持的属性, 时间关系我没有尝试每一个属性, 大家可以帮忙验证是否在所有浏览器下可用:

属性名称描述
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来取消冒泡。

转载于:https://www.cnblogs.com/firstgreen/archive/2012/11/20/2778491.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/260237.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ABP文档 - Mvc 视图

文档目录 本节内容&#xff1a; 简介AbpWebViewPage 基类简介 ABP通过nuget包Abp.Web.Mvc集成到Mvc视图里&#xff0c;你可以像往常那样创建常规的视图。 AbpWebViewPage 基类 ABP也提供了AbpWebViewPage&#xff0c;它定义了一些有用的属性和方法&#xff0c;如果你使用启动模…

ThinkPad L440 FN键设置

刚入手了ThinkPad L440&#xff0c;用起来相当不错&#xff0c;嘿嘿&#xff01; L440系统默认&#xff08;F1-F12&#xff09;键盘为系统默认功能键&#xff0c;主要控制音量、亮度、连接投影仪等。 因为编写程序需要调试&#xff0c;经常用到F10&#xff0c;F11等键&#xff…

离散数学反对称关系_《离散数学》学习记录 - 集合论

来源&#xff1a;北京大学《离散数学》公开课地址&#xff1a;https://www.bilibili.com/video/av18896337/?p122.1 有序对和卡氏积有序对<a,b>&#xff1a;有顺序&#xff0c;类似于数组&#xff0c;可以用集合定义。性质&#xff1a;有序对内元素对应相等卡氏积AB&…

收集的博客列表

前端&#xff1a; ———————————————————— 宅居 - 裸: http://otakustay.com/ 转载于:https://www.cnblogs.com/ccdc/archive/2012/11/21/2780879.html

php创建表并插入数据,php数据库操作-创建库和表以及插入数据

以上我们正确连接到了mysql数据库&#xff0c;本文将进一步创建数据库&#xff0c;表&#xff0c;在表中填充数据。大家知道连接上数据库才能进行操作&#xff0c;同样的代码搬过来/** 数据库操作*(创建数据库&#xff0c;表&#xff0c;插入数据&#xff0c;插入多条数据)** T…

C#配置及使用log4net

首先从官方网站http://logging.apache.org/log4net/下载最近版本的log4net组件。在程序中添加对log4net.dll的引用&#xff0c;就可以在程序中使用了。 下一步&#xff0c;编写配置文件&#xff0c;内容如下 <?xml version"1.0" encoding"utf-8" ?>…

ORACLE EBS常用表及查询语句(最终整理版)

建议去看参考二 参考一&#xff1a; call fnd_global.APPS_INITIALIZE(1318,50583,401) select fnd_profile.VALUE(ORG_ID) FROM DUAL select * from hr_operating_units hou where hou.organization_id204 --fn…

mysql触发器 当记录的指定字段发生变化时,更新表中的另外一个字段,或者更新另外一张关联表中关联记录的字段...

2019独角兽企业重金招聘Python工程师标准>>> 注意&#xff1a;语句中出现的old&#xff0c;new&#xff0c;now&#xff08;&#xff09;&#xff0c;都为数据库自带的关键字&#xff0c;此处不做解释。 两种情况&#xff1a; 第一种&#xff1a;一张表中&#xff0…

通用无线设备对码软件_珞光全新发布国产通用软件无线电平台 :USRP-LW N310!珞光品牌已实现国产替代...

USRP-LW N310是一种网络的软件定义无线电&#xff08;SDR&#xff09;&#xff0c;它提供了部署大规模的可靠的和容错性的分布式无线系统。USRP-LW N310通过引入远程执行任务的能力简化了对SDR系统的控制和管理&#xff0c;如更新软件&#xff0c;重新启动&#xff0c;工厂复位…

手把手玩转win8开发系列课程(2)

对win8开发&#xff0c;上一节我们对win8进行了简单的介绍&#xff0c;这一节我们来瞧一瞧他的开发环境搭建。 前奏。 这里所讲的win8开发&#xff0c;主要是指Windows8 app store 上开发&#xff0c;及metro ui或叫morden ui 程序的开发。传统桌面应用程序&#xff0c;网站应…

python通过什么来区分不同语句块_Python语言通过

【填空题】小块【填空题】离开;出发(n.)【填空题】好人啊中的 “ 啊 ” 读( )【填空题】“ 洁癖 ” 的正确读音是( )【单选题】The article suggests that when a person ________ under unusual stress he should be especially careful to have a well-balanced diet. (CET20…

【Android面试】Android面试题集锦 (陆续更新)

【Android面试】Android面试题集锦 (陆续更新) 分类&#xff1a; 【杂七杂八】2011-05-11 17:58 2064人阅读 评论(0) 收藏 举报一些常见的Android面试基础题做下总结&#xff0c;看看你能做出多少道? 1. Intent的几种有关Activity启动的方式有哪些&#xff0c;你了解每个含义吗…

cordova-plugin-app-version插件使用

此插件用来获取开发软件的版本号&#xff01;首先安装此插件&#xff1a; 命令行中输入 cordova plugin add cordova-plugin-app-version然后刷新项目&#xff0c;就会在在项目plugins文件夹下看到cordova-plugin-app-version,如下图所示接下来就是使用此插件的语句获取版本号c…

14.cookie与自动登陆

场景 webdriver可以读取并添加cookie。有时候我们需要验证浏览器中是否存在某个cookie&#xff0c;因为基于真实的cookie的测试是无法通过白盒和集成测试完成的。 另外更加常见的一个场景是自动登陆。有很多系统的登陆信息都是保存在cookie里的&#xff0c;因此只要往cookie中添…

不同串口通信速率超时时间_串口知识详解 串口功能及电路介绍

一、串口的概念串行接口简称串口&#xff0c;也称串行通信接口或串行通讯接口(通常指COM接口)&#xff0c;是采用串行通信方式的扩展接口。串行接口(SerialInterface)是指数据一位一位地顺序传送&#xff0c;其特点是通信线路简单&#xff0c;只要一对传输线就可以实现双向通信…

matlab 求最大值函数,利用matlab, 二元函数求最大值

求二元函数z0.2323*x^2-0.2866^22*(-0.5406)*a0^21.0203*a0^2*x^2/((x^2y^2)^0.5*tanh(2*(x^2y^2)^0.5)-x^2*(0.5733-u0)^2)的最大值&#xff0c;变量x和y都是在0.2附近。求z的最大值&#xff0c;以及x,y的取值。先用diff命令求z关于x,y的偏导数得到q(1)和q(2)两个方程&#xf…

代码生成那点事

在微软技术中浸淫6年多了&#xff0c;我就常想啊&#xff0c;有没有一个工具&#xff0c;能让开发简单一点&#xff0c;哪怕就简单一点点&#xff1f;&#xff01; 这还是去年的事情&#xff0c;手里的项目都成功上线了&#xff0c;我和james聊天&#xff0c;我说咱们的这几个项…

python反爬虫破解_python中绕过反爬虫的方法总结

我们在登山的途中&#xff0c;有不同的路线可以到达终点。因为选择的路线不同&#xff0c;上山的难度也有区别。就像最近几天教大家获取数据的时候&#xff0c;断断续续的讲过header、地址ip等一些的方法。具体的爬取方法相信大家已经掌握住&#xff0c;本篇小编主要是给大家进…

vue上传文件php,php文件上传 – 前端开发,JQUERY特效,全栈开发,vue开发

文件上传一般有下面2种方式&#xff1a;有两种&#xff1a;1、标准input表单方式&#xff0c;典型的用$_FILES进行接收&#xff1b;2、以Base64的方式进行传送&#xff0c;一般是AJAX异步上传。第一种标准的input表单方式&#xff0c;适用于大文件进行上传&#xff0c;同时支持…

HDU 1003 Max Sum

同上题一样&#xff0c;求连续子序列的最大和 而且比上题还要简单一些&#xff0c;用不到long long了 直接水过 1 //#define LOCAL2 #include <iostream>3 #include <cstdio>4 #include <cstring>5 using namespace std;6 7 const int maxn 100000 10;8 in…