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事件在不同浏览器之间的差异的更多相关文章

  1. JQuery 阻止js事件冒泡 阻止浏览器默认操作

    //阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...

  2. JS 事件冒泡整理 浏览器的事件流

    JavaScript与HTML的交互通过事件来实现.而浏览器的事件流是一个非常重要的概念.不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议, 只需要知道在DOM2中规定的事件流包括了三个部分,事件捕 ...

  3. chromedriver驱动的浏览器和真实浏览器之间的差异

    一. 打印百度首页底部的声明 如图,想打印@2018 Baidu...后面的一长串文字,可以通过class name定位的形式 可以看出,只有一个class name是"copyright- ...

  4. JS Date当前时间：获取日期时间方法在各浏览器中的差异

    转自:http://www.feiesoft.com/00047/<script type="text/javascript"> // JS Date当前时间获取方法在 ...

  5. js 事件监听 兼容浏览器

    js 事件监听 兼容浏览器   ie 用 attachEvent   w3c(firefox/chrome)  用 addEventListener 删除事件监听 ie 用 detachEven   ...

  6. js中阻止事件冒泡和浏览器默认行为

    在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...

  7. 浏览器中开发人员工具快速找到dom元素绑定那些JS事件

    在web开发过程中难免会遇到让程序员去修改一些js代码东西,例如js的ajax和php等语言的交互等,在这其中你不得不了解点js的事件触发,且随着js的盛行各种插件的事件让程序员眼花缭乱,所以借助一个 ...

  8. js 停止事件冒泡 阻止浏览器的默认行为

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标右键就会弹出context menu. ...

  9. js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

随机推荐

  1. send/receive h264/aac file/data by rtp/rtsp over udp/tcp

    一.安装一些必要的调试工具 1.vlc安装sudo apt-get install vlcsudo apt-get install vlc-nox 2.ffmpeg安装,带ffplay,ffplay依 ...

  2. 脱离JVM? Hadoop生态圈的挣扎与演化

    本文由知乎<大数据应用与实践>专栏 李呈祥授权发布,版权所有归作者,转载请联系作者! 新世纪以来,互联网及个人终端的普及,传统行业的信息化及物联网的发展等产业变化产生了大量的数据,远远超出 ...

  3. apache-storm-1.0.3安装部署

      CentOS7-1 CentOS7-2 CentOS7-3 CentOS7-4 nimbus supervisor supervisor supervisor core(UI)       1.首 ...

  4. 模块讲解----random模块（随机取值）

    导入random模块 import random #查看random的帮助: # help(random) #随机浮点数: #用于生成一个0到1的0 >= n < 1.0的范围值 prin ...

  5. 怎么将linux下的项目转换成windows的VS2010下的项目？

    怎么将linux下的项目转换成windows的VS2010下的项目?             不显示删除回复             显示所有回复             显示星级回复        ...

  6. 在建立与服务器的连接时出错。在连接到 SQL Server 2005 时,在默认的设置下 SQL Server 不允许进行远程连

    在建立与服务器的连接时出错.在连接到 SQL Server 2005 时,在默认的设置下 SQL Server 不允许进行远程连 sql server服务器sqlserver远程连接数据库防火墙在建立 ...

  7. CSS中定义a:link、a:visited、a:hover、a:active顺序

    a :link.a:hover.a:visited这几个元素,定义CSS时候的顺序不同,也会直接导致链接显示的效果不同. eg:让未访问链接颜色为red,活动链接为yellow,已访问链接为green ...

  8. $python日期和时间的处理

    总结一下python中对日期和时间的常用处理方法. 准备 import time,datetime 常用操作 输出当前的日期时间 方式一: now = time.localtime() print ' ...

  9. centos7防火墙的简单配置介绍

    centos7版本 1.查看已开放的端口(默认不开放任何端口) firewall-cmd --list-ports 2.开启80端口 firewall-cmd --zone=public(作用域) - ...

  10. iOS开发之HelloKit代码片段

    完整代码托管:https://github.com/1042710553/HelloKit.git /************************/plist/****************** ...