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 text,radio,checkbox,select操作实现代码
Jul 09 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
开发用到的js封装方法(20种)
Oct 12 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编写一个简单的路由类
2011/04/13 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
angularJS 入门基础
2015/02/09 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
查看django版本的方法分享
2018/05/14 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
Python操作json的方法实例分析
2018/12/06 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
个人四风问题整改措施思想汇报
2014/10/04 职场文书