jQuery.event兼容各浏览器的event详细解析


Posted in Javascript onDecember 18, 2013

介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是通过jQuery方法绑定的,就不需要进行转换了!

jQuery在遵循W3C规范的情况下,对事件的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断。

1.event.type属性
该方法作用是可以获取到时间的类型

$("a").click(function(event){
    alert(event.type); //获取时间类型
    return false; //阻止链接跳转
})

以上代码运行后会返回:“click”。

2.event.preventDefault()方法
该方法的作用是阻止默认的事件行为。JavaScript中符合W3C规范的preventDefault()方法在IE浏览器中无效。jQuery对其进行了封装,使之能兼容各种浏览器。

3.event.stopPropagation()方法
该方法是阻止事件的冒泡。JavaScript中符合W3C规范的stopPropagation()方法在IE浏览器中无效。jQuery对其进行封装,使之能兼容各种浏览器。

4.event.target属性
event.target属性的作用是获取到出发事件的元素。jQuery对其封装后,避免了W3C、IE和safari浏览器不同标准的差异。

$("a[href=https://3water.com]").click(function(event){
    alert(event.target.href); //获取触发事件的<a>元素的href属性值
    alert(event.target.tagName); //获取触发事件的元素的标签名称
    return false; //阻止链接跳转})

5.event.relatedTarget属性
在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target()方法来访问,相关元素是通过event.relatedTarget属性来访问的。event.relatedTarget属性在mouseover中相当于IE浏览器的event.fromElement属性,在mouseout中相当于IE浏览器的event.toElement,jQuery对其进行了封装,使之能兼容各种浏览器。

6.event.pageX/event.pageY属性
该方法的作用是获取到光标相对页面的x坐标和y坐标。如果没有使用jQuery时,那么IE浏览器中是用event/event.y方法,而在Firefox浏览器中用event.pageX/event.pageY方法。如果页上有滚动条,则还要加上滚动条的宽度和高度。在IE浏览器中还应该减去默认的2px的边框。

$(function() {
    $("a").click(function(event) {
        alert("Current mouse position:" + event.pageX + "," + event.pageY);
        //获取鼠标当前相对于页面的坐标
        return false; //阻止链接跳转
    });
})

7.event.which属性
该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键;在键盘事件中获取键盘的按钮。
$(function() {
    $("body").mousedown(function(e) {
        alert(e.which); //1 = 鼠标左键;2 = 鼠标中键;3 = 鼠标右键。
    })
})

以上代码加载到页面中,用鼠标单击页面时,单击左、中、右键分别返回1、2、3.

8.event.metaKey属性
针对不同浏览器对键盘中的<ctrl>按键解释不同,jQuery也进行了封装,并规定event.metaKey()方法为键盘事件中获取<ctrl>按键。

9.event.originalEvent属性。
该方法的作用是指向原始的事件对象。

Javascript 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 Javascript
jquery中event对象属性与方法小结
Dec 18 #Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 #Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 #Javascript
cookie中的path与domain属性详解
Dec 18 #Javascript
浅析Cookie中的Path与domain
Dec 18 #Javascript
jquery.cookie用法详细解析
Dec 18 #Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 #Javascript
You might like
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
.net笔试题
2014/03/03 面试题
高级Java程序员面试要点
2013/08/02 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
幼儿教师个人总结
2015/02/05 职场文书
董事长助理岗位职责
2015/02/11 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
外出听课学习心得体会
2016/01/15 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书