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 相关文章推荐
jQuery select操作控制方法小结
May 26 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 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
DC动漫人物排行
2020/03/03 欧美动漫
UCenter Home二次开发指南
2009/05/28 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
JS实现分页导航效果
2020/02/19 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
综合办公室主任职责
2013/12/16 职场文书
英语专业求职信
2014/07/08 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
python字典进行运算原理及实例分享
2021/08/02 Python
MySQL的索引你了解吗
2022/03/13 MySQL
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python