• addEventListener共有3个参数,如下所示:
    element.addEventListener(type,listener,useCapture);

    参数 参数说明
    element 要绑定事件的对象,及HTML节点。
    type 事件名称,注意去掉事件前边的“on”,比如“onclick”要写成“click”,“onmouseover”要写成“mouseover”。
    listener 要绑定的事件监听函数,注意只写函数名,不要带括号。
    userCapture 事件监听方式,只能是true和false:true,采用capture(捕获)模式;false,采用bubbling(冒泡)模式。如无特殊要求,一般是false。

    这里有必要说一下捕获模式和冒泡模式的区别。

    如图所示,有两层div元素,而且都设定有click事件,一般来说,如果我在内层蓝色的元素上click不只会触发蓝色元素的click事件,还会同时触发红色元素的click事件,而useCapture这个参数就是在控制这时候两个click事件的先后顺序。如果是false,那就会使用bubbling(冒泡)模式,他是从内而外的流程,所以会先执行蓝色元素的click事件再执行红色元素的click事件,如果是true,那就是capture(捕获)模式,和bubbling(冒泡)模式相反是由外而内,会先执行红色元素的click事件才执行蓝色元素的click事件。
    如果不同层的元素使用的useCapture不同,会先从最外层元素往目标元素寻找设定为capture(捕获)模式的事件,到达目标元素执行目标元素的事件后,再寻原路往外寻找设定为bubbling(冒泡)模式的事件。

  • attachEvent共有2个参数,如下所示:
    element.attachEvent(type,listener);
    参数 参数说明
    element 要绑定事件的对象,及HTML节点。
    type 事件名称,注意加上事件前边的“on”,比如“onclick”和“onmouseover”,这是与addEventListener的区别。
    listener 要绑定的事件监听函数,注意只写函数名,不要带括号。
addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。
 
兼容IE和非IE浏览器事件绑定的代码:
  1. function addEvent(obj,type,handle){
  2. try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
  3. obj.addEventListener(type,handle,false);
  4. }catch(e){
  5. try{  // IE8.0及其以下版本
  6. obj.attachEvent('on' + type,handle);
  7. }catch(e){  // 早期浏览器
  8. obj['on' + type] = handle;
  9. }
  10. }
  11. }

或者

  1. function regEvent(ele, event_name, fun)
  2. {
  3. if (window.attachEvent)
  4. ele.attachEvent(event_name, fun);  //IE浏览器
  5. else
  6. {
  7. event_name = event_name.replace(/^on/, “”);   //如果on开头,删除on,如onclick->click
  8. ele.addEventListener(event_name, fun, false);  //非IE浏览器
  9. }
  10. }
 

addEventListener和attachEvent的区别的更多相关文章

  1. Javascript中addEventListener和attachEvent的区别

    在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...

  2. addEventListener和attachEvent的区别(转载)

    attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attachEvent——兼容:IE7.IE8:不兼容firefox.chrome.I ...

  3. addEventListener和attachEvent的区别 分类: JavaScript 2015-05-12 19:03 702人阅读 评论(0) 收藏

    addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...

  4. addEventListener()及attachEvent()区别分析

    Javascript 的addEventListener()及attachEvent()区别分析 Mozilla中: addEventListener的使用方式: target.addEventLis ...

  5. addEventListener和attachEvent以及element.onclick的区别

    addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...

  6. addEventListener 与attachEvent

    第一:简单的通用方法(IE && FF) window.onload = function(){ var oDiv = document.getElementById("J_ ...

  7. addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】

    yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...

  8. 注册事件处理程序onclick和addEventListener、attachEvent

    一.设置HTML标签属性为事件处理程序(注意和下面的设置javascript对象属性为事件处理程序是不同的) 用于设置文档元素事件处理程序属性也能化成对应的HTML标签的属性.如果这样做,属性值应该是 ...

  9. addEventListener()、attachEvent()和removeEventListener()、detachEvent()的差别?

    addEventListener()和attachEvent()的差别? addEventListener:在HTML元素上绑定事件,FF.chrome.opera.safari及IE9浏览器以上的支 ...

随机推荐

  1. nodejs 批量修改、删除

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQhCAIAAABDaAVHAAAgAElEQVR4nOydeXxU5aH359733vd9b/ ...

  2. 判断checkbox的checked状态(jQuery写法)

    $('#checkboxInput').click(function(){ if (this.checked){ $('.questionContainer').css({ "opacity ...

  3. eclipse build workspace太慢或者 js出错问题解决

    1.js文件错误解决办法 右键项目->properties->Builders(注:JavaScript Validator也会引起 build workspace太慢) 2.Eclips ...

  4. ASP.NET MVC之JsonResult(六)

    前言 这一节我们利用上节所讲Unobtrusive Ajax并利用MVC中的JsonResult来返回Json数据. JsonResult 上节我们利用分部视图返回数据并进行填充,当我们发出请求需要获 ...

  5. 如何从源码中学习javascript

    艾伦说啊,学习javascript,必须要学会看源码,通过高手的源码,你可以从中吸取很多书本上难以看到的技巧. 看源码就好像喝鸡汤,所有的营养都在这汤里了.这汤就是源码,高手写的源码,就是最好的鸡汤. ...

  6. CDH安装失败了,如何重新安装

    1> 删除Agent节点的UUID # rm -rf /opt/cm-5.4.7/lib/cloudera-scm-agent/* 2>  清空主节点CM数据库 进入主节点的Mysql数据 ...

  7. Linux入门

    参考资料:http://www.92csz.com/study/linux/ [Linux系统目录结构] 登录系统后,在当前命令窗口下输入 ls / 你会看到 以下是对这些目录的解释: /bin bi ...

  8. WebGIS开源方案中空间数据的入库、编辑、发布的操作流程

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 本开源方案的构架是:geoserver(服务器)+tomca ...

  9. ASP.NET MVC 概述

    目标:学习ASP.NET MVC 和ASP.NET WebForm的不同之处.学习在合适的地方使用ASP.NET MVC. MVC(Model-View-Controller)结构模式把一个对象分离成 ...

  10. Android从网络某个地址下载文件、写入SD卡

    首先创建一个HttpDownloader类,获取下载文件的网络地址,将文件下载下来以String流的方式返回: public String download(String urlStr){ //url ...