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 相关文章推荐
innerText和innerHTML 一些问题分析
May 18 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
js图片自动切换效果处理代码
May 07 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
基于jquery编写分页插件
Mar 07 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
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 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
python-str,list,set间的转换实例
2018/06/27 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
python实现归并排序算法
2018/11/22 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
python SVM 线性分类模型的实现
2019/07/19 Python
详解Python3 pandas.merge用法
2019/09/05 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
中学家长会邀请函
2014/01/17 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
个人自我鉴定总结
2014/03/25 职场文书
小学毕业教师寄语
2019/06/21 职场文书
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫