一般我们在JS中添加事件,是这样子的:

obj.onclick = method

  这种绑定事件的方式,兼容主流浏览器,但是如果一个元素上添加多次同一个事件呢???

obj.onclick = method1;
obj.onclick = method2;
obj.onclick = method3;

  如果这样写,那么只有绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角该登场了,在IE中我们可以使用attachEvent方法

btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

  使用格式前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是method3 --> method2 --> method1

可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法

btn1Obj.addEventListener('click',method1,false);
btn1Obj.addEventListener('click',method2,false);
btn1Obj.addEventListener('click',method3,false);

  执行顺序是method1 -->  method2  -->  method3,

作为前端开发工程师,最悲剧的莫过于浏览器的兼容问题,上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数,幸亏有前人帮我们做了这件事

<script>
function addEvent(elem,evType,fn,useCapture){
if (elem.addEventListener) {
elem.addEventListener(evType,fn,useCapture);//DOM 2.0
return true;
}else if(elem.attachEvent){
var r = elem.attachEvent('on'+evType,fn); //IE5+
return r;
}else{
elem['on'+evType] = fn; //DOM 0
}
}
</script>

  转载:http://www.oschina.net/question/54100_25614

js添加事件 attachEvent 和addEventListener的用法的更多相关文章

  1. js 添加事件 attachEvent 和 addEventListener 的用法

    一般我们在JS中添加事件,是这样子的 ? 1 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? ? 1 2 3 obj.onclick=m ...

  2. js 添加事件 attachEvent 和 addEventListener 的区别

    1.addEventListener 适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->meth ...

  3. js中添加事件 attachEvent 与 addEventListener

    给元素添加事件时,使用js进行实现时产生了疑惑,有关事件浏览器兼容的问题,在此记录如下. <!DOCTYPE html> <html> <head> <met ...

  4. js添加事件通用方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. js添加事件监听的方式与this

    js添加事件监听与this js添加事件监听的方式与this 在标签中调用自定义函数 DOM0级事件处理程序 DOM2级事件处理程序 this 代表谁? js添加事件监听的方式与this <di ...

  6. IE9 添加事件DOMContentLoaded,方法addEventListener

    IE9 新添加 事件DOMContentLoaded,方法addEventListener

  7. JS添加事件和解绑事件:addEventListener()与removeEventListener()

    作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...

  8. js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法

    js的事件绑定方法中,ie仅仅支持attachEvent,而FF和Chrome仅仅支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先推断attachEvent仅仅否为真( ...

  9. js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

    转自:http://blog.csdn.net/itchiang/article/details/7769341 添加事件   var addEvent = function( obj, type, ...

随机推荐

  1. Appium-Java滑动操作

    Java滑动操作,通常可以直接使用API中AndroidDriver类中的swipe方法,直接进行调用 swipe(int startx, int starty, int endx, int endy ...

  2. mysql 系统变量和session变量

    mysql系统变量包括全局变量(global)和会话变量(session),global变量对所有session生效,session变量包括global变量.mysql调优必然会涉及这些系统变量的调整 ...

  3. 推荐系统第3周--- 大数据环境下的itemCF实现

    代码报错注意事项: 1:最后Ctrl+shift+O  导入包2:导入mahout包3:新建datafile文件包,在其下面新建csv文件

  4. mysql lock

    http://blog.chinaunix.net/uid-21505614-id-289450.html http://bbs.csdn.net/topics/340127237 http://ww ...

  5. 07 nginx反向代理和nfs服务

    作业一:nginx服务二进制安装nginx包 作为web服务修改配置文件 让配置生效,验证配置 作业二:nfs服务二进制安装nfs作为共享存储挂载在三台web的网站根目录下实现,在任意一台web上修改 ...

  6. 数据结构 练习21-trie的原理分析和应用

    前言 今天具体分析一下trie树,包括:原理分析,应用场合,复杂度分析,与hash的比较,源码展现.大部分内容来自互联网,文中会注明出处. 原理分析 主要是hash树的变种,先看下图: 每一个点存储一 ...

  7. Core ML 入门

    1.下载Xcode 9 2.下载模型,https://developer.apple.com/machine-learning/ 3.开动.. 4.待续 模拟器66的

  8. IDEA 2018.2破解

    最新的IDEA激活方式 使用网上传统的那种输入网址的方式激活不了,使用http://idea.lanyus.com/这个网站提供的工具进行 1.进入hosts文件中:C:\Windows\System ...

  9. C++在VS下创建、调用dll

    转自:http://www.cnblogs.com/houkai/archive/2013/06/05/3119513.html 目录 1.dll的优点 代码复用是提高软件开发效率的重要途径.一般而言 ...

  10. Swoole学习(二)Swoole之TCP服务器的创建

    环境:Centos6.4,PHP环境:PHP7 <?php //创建TCP服务器 /** * $host 是swoole需要监听的ip,如果要监听本地,不对外服务,那么就是127.0.0.1;如 ...