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 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
javascript断点调试心得分享
Apr 23 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 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 checkbox 取值详细说明
2010/08/19 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
js查找节点的方法小结
2015/01/13 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
js 数组当前行添加数据方法详解
2020/07/28 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
大一军训感言
2014/01/09 职场文书
十佳护士先进事迹
2014/05/08 职场文书
中学清明节活动总结
2014/07/04 职场文书
就业协议书
2014/09/12 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技