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 相关文章推荐
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
原生js实现俄罗斯方块
Oct 20 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
Python 爬虫的原理
2020/07/30 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
党员志愿者活动方案
2014/08/28 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
读书笔记怎么写
2015/07/01 职场文书
班主任工作总结范文
2015/08/13 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB