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 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
如何用threejs实现实时多边形折射
May 07 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读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
python中Flask框架简单入门实例
2015/03/21 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
社区食品安全实施方案
2014/03/28 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
保护黄河倡议书
2014/05/16 职场文书
企业形象策划方案
2014/05/29 职场文书
机关作风建设工作总结
2014/10/23 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
运动会跳远广播稿
2015/08/19 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery