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继承 笔记
Jul 13 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
Node.js编码规范
Jul 14 Javascript
javascript清空table表格的方法
May 14 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
javaScript语法总结
Nov 25 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 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
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
js右键菜单效果代码
2007/07/21 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python实现将文本转换成语音的方法
2015/05/28 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
Django视图扩展类知识点详解
2019/10/25 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Python 存取npy格式数据实例
2020/07/01 Python
动态密码技术
2012/10/18 面试题
信息专业个人的自我评价
2013/12/27 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
事业单位聘任报告
2015/03/02 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书