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 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 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
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
js实现轮播图特效
2020/05/28 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python中with及contextlib的用法详解
2017/06/08 Python
Python之os操作方法(详解)
2017/06/15 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
python获取中文字符串长度的方法
2018/11/14 Python
python实现QQ批量登录功能
2019/06/19 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
总经理职责范文
2013/11/08 职场文书
水污染治理专业毕业生推荐信
2013/11/14 职场文书
国际贸易求职信
2014/07/05 职场文书
小学生差生评语
2014/12/29 职场文书
颐和园的导游词
2015/01/30 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
天鹅湖观后感
2015/06/09 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server