js事件在不同浏览器之间的差异
1. 介绍
javascript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。只不过在当年还没有统一标准的时候，各个浏览器厂商都制定了自己的标准，当我们编写代码时就要考虑不同浏览器之间的各种差异。
事件流一般包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。所有现代浏览器都支持时间冒泡，但在具体实现上有一些差异，IE5.5及更早版本中的事件冒泡会跳过<html>元素（从<body>直接跳到document），IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象；老版本的浏览器不支持事件捕获。
2. 不同浏览器之间的差异
其实这个跟之间的写过的文章浏览器检测-js中，我们也有提到过一些。各个浏览器之间确实存在差异，这是我们不可避免的。我们能做的就是尽量去寻找一个通用的方法，如果没有通用的方法，那我们只能针对不同浏览器的特性分别写代码了。当然，也有很多人专门写了一些JS代码来消除这些差异，比如jQuery，在我们jQuery时很少会考虑浏览器的差异，那是因为jQuery内部已经为我们处理好了。IE什么的最讨厌了。
2.1 添加事件的方法
我们通常是这样为某元素添加事件的：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
//处理代码
})
这样就能为id是myBtn的元素绑定一个click事件了。其实addEventListener有三个参数，只不过我们通常会省略掉第三个参数：
第一个参数：添加事件的类型，比如click, mouseover, mousemove等等，这里的事件类型是没有on，不是"onclick"；
第二个参数：事件处理函数，这里用来添加需要执行的代码；
第三个参数：在哪个阶段调用事件处理程序，布尔值。若为true，表示在捕获阶段处理；若为false则在冒泡阶段进行处理。默认为false。
而且如果我们用addEventListener为同一个元素添加多个相同事件时，事件会按添加的顺序依次执行。
IE中为某元素添加事件的方法：
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
//处理代码
})
这里我们能够很明显地看到两者的不同：IE中使用attachEvent添加事件，而且添加事件的类型有"on"，这个方法只有两个参数，因为用attachEvent添加的事件会被添加到冒泡阶段。
第一个参数：添加事件的类型，比如有"onclick", "onmouseover"等，这里的事件类型是带有"on"的；
第二个参数：事件处理函数，用来处理程序。
如果用attacheEvent为某一元素添加多个相同事件时，最后添加的事件会首先被执行。
2.2 事件对象event
IE和其他浏览的event对象是不同的。在其他浏览器中若要使用时，都要传入event对象，而在IE中，event却是window对象的一个属性。
var btn = document.getElementById("myBtn");
/* 非IE */
btn.addEventListener("click", function(event){
//处理代码
alert(event.type);
})
/* IE */
btn.attachEvent("onclick", function(){
//处理代码
var event = window.event;
alert(event.type);
})
不过在实际中，我们却不能把这两个并列地写，因为其中一个方法在某一个浏览器中肯定是没有定义的，会报错。当我们确实要使用event对象时，我们可以这样写：
function(event){
//处理代码
event = event || window.event;
alert(event.type);
}
这样就能保证event对象必然是存在可用的。
2.3 event中的属性/方法
不同浏览器的event存在方法不同，而且各自的属性与方法也不尽相同。
| 属性/方法 | 类型 | 读/写 | 说明 |
| bubbles | Boolean | 只读 | 表明事件是否冒泡 |
| cancelable | Boolean | 只读 | 是否可以取消事件的默认行为 |
| currentTarget | Element | 只读 | 其事件处理程序当前正在处理事件的那个元素 |
| eventPhase | Integer | 只读 | 调用事件处理程序的阶段：1捕获阶段，2处于目标，3冒泡阶段 |
| preventDefault() | Function | 只读 | 取消事件的默认行为。只在cancelable为true时才可使用该方法 |
| stopPropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡。只在bubbles为true时才可使用该方法 |
| target | Element | 只读 | 真正触发事件的那个元素 |
| type | String | 只读 | 被触发事件的类型 |
IE中event的属性与方法：
| 属性/方法 | 类型 | 读/写 | 说明 |
| cancelBubble | Boolean | 读/写 | 是否取消事件的进一步冒泡。为true时取消冒泡，默认为false |
| returnValue | Boolean | 读/写 | 是否取消事件的默认行为。为false时取消事件的默认行为，默认为true |
| srcElement | Element | 只读 | 事件的目标 |
| type | String | 只读 | 被触发事件的类型 |
我们从两个表格中能够看到，还是有很多的属性和方法是相似的，虽然名称和使用的方法不同，但最终的目的都是一样的。
不过为了在各个浏览器之间的通用，我们可以这样写：
function(event){
//处理代码
event = event || window.event;
//取消事件的默认行为
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue = false;
}
//取消事件的进一步冒泡
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble = true;
}
}
首先判断浏览器是否支持该属性或方法，如果支持则使用该属性或方法，否则使用另一个属性或方法。
3. 总结
浏览器兼容是前端程序员永远的痛，不只是在js，css也有很大的不同。不过在标准越来越统一的大环境下，将来要考虑的差异性就会少多了。这里要说一句：IE11现在已经废除了attachEvent方法。
js事件在不同浏览器之间的差异的更多相关文章
- JQuery 阻止js事件冒泡 阻止浏览器默认操作
//阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...
- JS 事件冒泡整理 浏览器的事件流
JavaScript与HTML的交互通过事件来实现.而浏览器的事件流是一个非常重要的概念.不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议, 只需要知道在DOM2中规定的事件流包括了三个部分,事件捕 ...
- chromedriver驱动的浏览器和真实浏览器之间的差异
一. 打印百度首页底部的声明 如图,想打印@2018 Baidu...后面的一长串文字,可以通过class name定位的形式 可以看出,只有一个class name是"copyright- ...
- JS Date当前时间：获取日期时间方法在各浏览器中的差异
转自:http://www.feiesoft.com/00047/<script type="text/javascript"> // JS Date当前时间获取方法在 ...
- js 事件监听 兼容浏览器
js 事件监听 兼容浏览器 ie 用 attachEvent w3c(firefox/chrome) 用 addEventListener 删除事件监听 ie 用 detachEven ...
- js中阻止事件冒泡和浏览器默认行为
在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...
- 浏览器中开发人员工具快速找到dom元素绑定那些JS事件
在web开发过程中难免会遇到让程序员去修改一些js代码东西,例如js的ajax和php等语言的交互等,在这其中你不得不了解点js的事件触发,且随着js的盛行各种插件的事件让程序员眼花缭乱,所以借助一个 ...
- js 停止事件冒泡 阻止浏览器的默认行为
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标右键就会弹出context menu. ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
随机推荐
- Linux cp命令
cp命令(copy),用来对一个或多个文件,目录进行拷贝 1.语法 cp [选项] [参数] 2.命令选项 -b 当文件存在时,覆盖前,为其创建一个备份-d 当复制软连接时,把目标文件或目录也建立为软 ...
- 查看Oracle的表中有哪些索引及其禁用索引
查看Oracle中表的索引是否存在 用user_indexes和user_ind_columns系统表查看已经存在的索引 对于系统中已经存在的索引我们可以通过以下的两个系统视图(user_indexe ...
- WSDL（WebService描述语言）文件介绍
一.WSDL 1.WSDL 文档的组成部分 <portType>:web service 执行的操作 <message>:web service 使用的消息 <types ...
- Linux系统——awk命令
awk命令不仅仅是Linux系统的命令,也是一种编程语言,用来处理数据和生成报告(Exel),处理的数据可以是一个或多个文件(标准输入和管道获取标准输入).可在命令行上编辑操作,也可以写成awk程序运 ...
- HDU - 5909 Tree Cutting (树形dp+FWT优化)
题意:树上每个节点有权值,定义一棵树的权值为所有节点权值异或的值.求一棵树中,连通子树值为[0,m)的个数. 分析: 设\(dp[i][j]\)为根为i,值为j的子树的个数. 则\(dp[i][j\o ...
- 论文笔记：dropout
Improving neural networks by preventing co-adaptation of feature detectors arXiv preprint arXiv: 120 ...
- typeof instanceof 和 obj.constructor
1.typeof用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果: 'number','boolean','string','function'(函数),'object'(NU ...
- Ubuntu16.04系统Python3相关环境或模块安装
前提:一般用户安装都命令前都需要sudo ,或者在root用户下 1.Ubuntu 16.04 安装PyCharm Ubuntu 16.04 安装PyCharm 本文通过第三方源安装PyCharm,好 ...
- javascript中常用函数汇总
js中函数很多,在实际项目开发中,函数的应用可以很大程度上简化我们的代码,所以在此记下开发中js中常用的函数,增强记忆. 1.isNaN(X):函数用于检查其参数是否是非数字值. 如果 x 是特殊的非 ...
- ubuntu 14.04 163镜像
1.备份原来/etc/apt/sources.list 2.以下内容覆盖原来文件内容 deb http://mirrors.163.com/ubuntu/ trusty main restricted ...