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的eval()中使用函数的进一步讨论
Jul 26 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
jQuery插件的写法分享
Jun 12 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
Vue中keep-alive组件的深入理解
Aug 23 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 date函数参数详解
2006/11/27 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
实现JavaScript中继承的三种方式
2009/10/16 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
Django实现自定义404,500页面教程
2017/03/26 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
python实现证件照换底功能
2019/08/20 Python
Python实现点云投影到平面显示
2020/01/18 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
python 调用Google翻译接口的方法
2020/12/09 Python
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
为什么要做架构设计
2015/07/08 面试题
有关骆驼祥子的读书笔记
2015/06/26 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
Python实现仓库管理系统
2022/05/30 Python