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 相关文章推荐
javascript fullscreen全屏实现代码
Apr 09 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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
提升PHP执行速度全攻略
2006/10/09 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
JavaScript高级程序设计
2006/12/29 Javascript
JavaScript Archive Network 集合
2007/05/12 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python中os和shutil模块实用方法集锦
2014/05/13 Python
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
python字典序问题实例
2014/09/26 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
Python程序控制语句用法实例分析
2020/01/14 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
运动会入场解说词300字
2014/01/25 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
技校毕业生自荐书
2014/05/23 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
2015年清明节活动总结
2015/02/09 职场文书
求职自我评价怎么写
2015/03/09 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python