attachEvent与addEventListener区别
适应的浏览器版本不同,同时在使用的过程中要注意
attachEvent方法          按钮onclick
addEventListener方法    按钮click

两者使用的原理:可对执行的优先级不一样的事件进行操作:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)

addEventListener方法 用于 Mozilla系列

举例:

Js代码
  • document.getElementById(“btn”).onclick = method1;
  • document.getElementById(“btn”).onclick = method2;
  • document.getElementById(“btn”).onclick = method3;如果这样写,那么将会只有medhot3被执行

写成这样:

Js代码
  • var btn1Obj = document.getElementById(“btn1″); //object.attachEvent(event,function);
  • btn1Obj.attachEvent(“onclick”,method1);
  • btn1Obj.attachEvent(“onclick”,method2);
  • btn1Obj.attachEvent(“onclick”,method3);执行顺序为method3->method2->method1

如果是Mozilla系列,并不支持该方法,需要用到addEventListener var btn1Obj = document.getElementById(“btn1″);
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener(“click”,method1,false);
btn1Obj.addEventListener(“click”,method2,false);
btn1Obj.addEventListener(“click”,method3,false);执行顺序为method1->method2->method3

使用实例:

Js代码

1. var el = EDITFORM_DOCUMENT.body;

//先取得对象,EDITFORM_DOCUMENT实为一个iframe

if (el.addEventListener){

  el.addEventListener(‘click’, KindDisableMenu, false);

}

else if (el.attachEvent){

  el.attachEvent(‘onclick’, KindDisableMenu);

}

2. if (window.addEventListener) {

  window.addEventListener(‘load’, _uCO, false);

} else if (window.attachEvent) {

  window.attachEvent(‘onload’, _uCO);

}

//先取Js代码

  detachEvent(‘onclick’,func);//ie下使用删除事件func

  removeEventListener(‘click’,func);//Mozilla下,删除事件func

摘自:http://blog.163.com/wumingli456@126/blog/static/288964142010755811775/

JS事件监听 JS:attachEvent和addEventListener 使用方法的更多相关文章

  1. (转载)JS事件监听 JS:attachEvent和addEventListener使用方法

    (转载)http://www.chhua.com/web-note146 attachEvent和addEventListener使用方法 Js代码 <html> <head> ...

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

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

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

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

  4. js事件监听机制(事件捕获)

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

  5. js 事件监听 冒泡事件

    js 事件监听  冒泡事件   的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  6. js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)

    研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...

  7. js 事件监听封装

    var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler ...

  8. js事件监听

    /* 事件监听器 addEventListener() removeEventListener() 传统事件绑定: 1.重复添加会,后添加的后覆盖前面的. */ 示例代码中的html结构: <b ...

  9. Js事件监听封装(支持匿名函数)

    先看demo:http://liutian1937.github.io/demo/EventListen.html/*绑定事件与取消绑定*/ var handleHash = {}; var bind ...

随机推荐

  1. BZOJ_1003_[ZJOI2006]_物流运输_(动态规划+最短路)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1003 m个码头,从1运货到m,n天每天运,其中有一些码头在特定的天里不能使用.运货的代价:在两 ...

  2. BZOJ_1202_狡猾的商人_(并查集)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1202 n 个月的账单,共 m 组数据,每一组数据包括 x , y , t ,表示从 x 月到 ...

  3. sql server 2005+ 行转列

    )) , 'aa') , 'bb') , 'aaa') , 'bbb') , 'ccc') go , , '') from tb group by id

  4. [CODEVS2055]集合划分

    对于从1到N(1<=N<=3)的连续整数集合,划分成两个子集合,使得每个集合的数字之和相等.举个例子,如果N=3,对于{1,2,3}能划分成两个子集合,他们每个的所有数字和是相等的:{3} ...

  5. nopCommerce_3.00-Nop.Core.Caching

    namespace Nop.Core.Caching { /// <summary> /// Cache manager interface /// </summary> pu ...

  6. Android 2014年1月22日

    一.广播优先顺序 Android广播有两个很重要的要素:    1 广播 - 用于发送广播 有序广播  -  被广播接收器接收后,可被终止,无法往下继续传达.         典型代表:短信广播 普通 ...

  7. Java编程常见问题汇总

    每天在写Java程序,其实里面有一些细节大家可能没怎么注意,这不,有人总结了一个我们编程中常见的问题.虽然一般没有什么大问题,但是最好别这样做.另外这里提到的很多问题其实可以通过Findbugs( h ...

  8. Yii框架zii.widgets.grid自定义按钮,ajax触发事件并提示

    相关类手册: http://www.yiichina.com/api/CButtonColumn   buttons 属性 public array $buttons; the configurati ...

  9. mvn开发可执行的java程序

    1.  用maven-assembly-plugin插件 2. 在项目的pom文件中加入以下该插件的配置 <span style="font-size:18px;">& ...

  10. 转载-Linux下搭建VPN服务器(CentOS、pptp)

    转自:http://www.cnblogs.com/sixiweb/archive/2012/11/20/2778732.html 搭建过程参考这篇文章 先说我搭建过程中出现的问题吧: 按照 教程搭建 ...