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

  1. obj.onclick = method

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

  1. obj.onclick = method1;
  2. obj.onclick = method2;
  3. obj.onclick = method3;

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

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

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

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

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

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

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

  1. <script>
  2. function addEvent(elem,evType,fn,useCapture){
  3. if (elem.addEventListener) {
  4. elem.addEventListener(evType,fn,useCapture);//DOM 2.0
  5. return true;
  6. }else if(elem.attachEvent){
  7. var r = elem.attachEvent('on'+evType,fn); //IE5+
  8. return r;
  9. }else{
  10. elem['on'+evType] = fn; //DOM 0
  11. }
  12. }
  13. </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. ovn-kubernetes执行流程概述

    Master部分 1.master初始化 以node name创建一个distributed logical router 创建两个load balancer用于处理east-west traffic ...

  2. 如何删除Docker中的镜像相关

    1.正常情况下 1.停止所有的container,这样才能够删除其中的images: docker stop $(docker ps -a -q) 如果想要删除所有container的话再加一个指令: ...

  3. C++ 类的两种定义方式

    类内定义 class Teacher { private: string _name; int _age; public: Teacher() { printf("create techer ...

  4. SQL Server 2008 添加登录账户并配置权限

    首先打开数据库,并以windows身份验证模式进入数据库. 然后在左侧的[对象资源管理器中]展开[安全性]节点,鼠标右键点击节点中的[登录名],在弹出的菜单中单击[新建登录名],弹出一个对话框. 1. ...

  5. R中的一些基础1106

    1.R中NA,NaN,Inf代表什么? NA:缺失数据 NaN:无意义的数,比如sqrt(-2) Inf:正无穷大 -Inf:负无穷大 2.确定一个数值型vector的第一个最值(最大/最小)的下标: ...

  6. cpu与寄存器,内核态与用户态及如何切换

    cpu:相当于计算机的大脑负责运算和发送命令: 寄存器:寄存器是cpu当中的一个有限存储部件,cpu从内存调用数据时,寄存器会将从内存调用的数据进行更新在寄存器中以一个字或变量进行存储. 寄存器总共分 ...

  7. Restful风格API

    一:协议 API与用户的通信协议,总是使用HTTPS协议. 二:域名 应该尽量将API部署在专用域名之下. https://api.example.com 如果确定API很简单,不会有进一步扩展,可以 ...

  8. iClap助力移动互联网企业高效实现规范化管理

    移动互联网的迅速崛起,智能移动客户端深刻而全面地影响着人类生活与工作习惯.而企业办公已从原始的纸张办公,到固定PC办公,跨入到一个应用范围更广.效率更高的移动办公时代.由静生动,让企业办公更加人性化和 ...

  9. redis安全设置

    1. 设置监听ip为本地和内网ip bind 127.0.0.1 192.168.1.99 ## 可以是多个ip,用空格分割 2. 设置监听端口 port 16379 3. 设置密码 在配置文件中加入 ...

  10. Python 实例——进度条,文件读取

    进度条: import sys import time for i in range(50): sys.stdout.write("*") sys.stdout.flush() t ...