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 相关文章推荐
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
详解JavaScript中的this指向问题
Feb 05 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
PR值查询 | PageRank 查询
2006/12/20 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
vue实现循环切换动画
2018/10/17 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python在Console下显示文本进度条的方法
2016/02/14 Python
用python找出那些被“标记”的照片
2017/04/20 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
高中生活自我鉴定
2014/01/18 职场文书
会计专业自我评价
2014/02/12 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
副总经理岗位职责
2015/02/02 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL