浅谈addEventListener和attachEvent的区别

• 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浏览器事件绑定的代码：

function addEvent(obj,type,handle){
  try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
    obj.addEventListener(type,handle,false);
  }catch(e){
    try{ // IE8.0及其以下版本
      obj.attachEvent('on' + type,handle);
    }catch(e){ // 早期浏览器
      obj['on' + type] = handle;
    }
  }
}

或者

function regEvent(ele, event_name, fun)
{
  if (window.attachEvent)
    ele.attachEvent(event_name, fun); //IE浏览器
  else
  {
    event_name = event_name.replace(/^on/, “”);  //如果on开头，删除on，如onclick->click
    ele.addEventListener(event_name, fun, false); //非IE浏览器
  }
}

以上这篇浅谈addEventListener和attachEvent的区别就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • addEventListener和attachEvent二者绑定的执行函数中的this不相同

    写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前者是Firefox chrome,后者只是存在于IE系列中. 最近在写一个事件代理的时候,遇到一个BUG,发现除此外,二者绑定的执行函数中的 this 是不相同的,addEventListener 和 attachEvent函数在运行时候的上下文是不相同的. 用了一个简单的demo来描述这个不同点: 复制代码 代码如下: <html xmlns="http://www.w3.org/

  • javascript attachEvent和addEventListener使用方法

    attachEvent方法 按钮onclick addEventListener方法 按钮click 两者使用的原理:可对执行的优先级不一样,下面实例讲解如下: attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: Java代码 复制代码 代码如下: document.getElementById("btn").onclick = method1; document.getElem

  • JS在IE和FF下attachEvent,addEventListener学习笔记

    对象名.addEventListener("事件名(不带ON)",函数名,true/false);(FF下) 对象名.attachEvent("事件名",函数名);(IE下) 说明: 事件名称,要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on". 函数名,记住不要跟括号最后一个参数是个布尔值,表示该事件的

  • 讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别

    第一件事情. this 指钟是JavaScript语言中的一个特殊指钟,他在代码运行时,指向调用this语句的当前对象. 如果是事件绑定函数,则指向被绑定的元素本身. <script type="text/javascript"> //by Go_Rush(阿舜) from  http://ashun.cnblogs.com/ alert(this===window)  //true  直 接调用的时候,指向window本身 var gorush={     f:funct

  • Javascript 的addEventListener()及attachEvent()区别分析

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含"on",比如"click"."mouseover"."keydown"等. listener :实现了 EventListene

  • 浅谈addEventListener和attachEvent的区别

    浅谈addEventListener和attachEvent的区别

    • addEventListener共有3个参数,如下所示: element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事件的对象,及HTML节点. type 事件名称,注意去掉事件前边的"on",比如"onclick"要写成"click","onmouseover"要写成"mouseover". listener 要绑定的

  • 浅谈cookie 和session 的区别

    具体来说 cookie 是保存在"客户端"的,而session是保存在"服务端"的 cookie 是通过扩展http协议实现的 cookie 主要包括 :名字,值,过期时间,路径和域: 如果cookie不设置生命周期,则以浏览器关闭而关闭,这种cookie一般存储在内存而不是硬盘上.若设置了生命周期则相反,不随浏览器的关闭而消失,这些cookie仍然有效直到超过设定的过 期 时间. session 一种类似散列表的形式保存信息, 当程序需要为某个客户端的请求创建一个

  • 浅谈Ajax和JavaScript的区别

    javascript是一种在浏览器端执行的脚本语言,Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的技术其中就包括javascript. Javascript是由网景公司开发的一种脚本语言,它和sun公司的java语言是没有任何关系的,它们相似的名称只是一种行销策略. 在一般的web开发中,javascript是在浏览器端执行的,我们可以用javascript控制浏览器的行为和内容. 在 Ajax应用中信息是如何在浏览器和服务器之间传递的. 通过XML数据或者字符串 以上这篇

  • 浅谈sql连接查询的区别 inner,left,right,full

    --table1 表 ID NAME QQ PHONE 1 秦云 10102800 13500000 2 在路上 10378 13600000 3 LEO 10000 13900000 4 秦云 0241458 54564512 --table2 表 ID NAME sjsj gly 1 秦云 2004-01-01 00:00:00.000 李大伟 2 秦云 2005-01-01 00:00:00.000 马化腾 3 在路上 2005-01-01 00:00:00.000 马化腾 4 秦云 20

  • java集合_浅谈Iterable和Iterator的区别

    1). Iterator是迭代器类,而Iterable是为了只要实现该接口就可以使用foreach,进行迭代. 2). Iterable中封装了Iterator接口,只要实现了Iterable接口的类,就可以使用Iterator迭代器了. 3). 集合Collection.List.Set都是Iterable的实现类,所以他们及其他们的子类都可以使用foreach进行迭代. 4). Iterator中和核心的方法next(),hasnext(),remove(),都是依赖当前位置,如果这些集合直

  • 浅谈toLowerCase和toLocaleLowerCase的区别

    ECMAScript中涉及字符串大小写转换的方法有4个:toLowerCase().toLocaleLowerCase().toUpperCase()和toLocaleUpperCase(). 其中,toLowerCase()和toUpperCase()是两个经典的方法,借鉴自java.lang.String中的同名方法.而toLocaleLowerCase()和toLocaleUpperCase()方法则是针对特定地区的实现. 对有些地区来说,针对地区的方法与其通用方法得到的结果相同,但少数语

  • 浅谈c++ 字符类型总结区别wchar_t,char,WCHAR

    1.区别wchar_t,char,WCHAR ANSI:即 char,可用字符串处理函数:strcat( ),strcpy( ), strlen( )等以str打头的函数. UNICODE:wchar_t是Unicode字符的数据类型,它实际定义在里: typedef unsigned short wchar_t; 另外,在头文件中有这样的定义:typedef wchar_t WCHAR; 所以WCHAR实际就是wchar_t wchar_t 可用字符串处理函数:wcscat(),wcscpy(

  • 浅谈pytorch和Numpy的区别以及相互转换方法

    如下所示: # -*- coding: utf-8 -*- # @Time : 2018/1/17 16:37 # @Author : Zhiwei Zhong # @Site : # @File : Numpy_Pytorch.py # @Software: PyCharm import torch import numpy as np np_data = np.arange(6).reshape((2, 3)) # numpy 转为 pytorch格式 torch_data = torch.

  • 浅谈PrintStream和PrintWriter的区别和联系

    前言 这两者在往文件中写入字符串时,最终都需要通过字符集的映射关系得到对应字节. 但这二者在通过char得到对应若干字节的时机不一样,以new PrintStream( new BufferedOutputStream( new FileOutputStream("BasicFileOutput.out")));和new PrintWriter( new BufferedWriter( new FileWriter("BasicFileOutput.out")))为

  • 浅谈Synchronized和Lock的区别

    如下所示: Synchronized是内置的java关键字,Lock是一个java类. Synchronized无法判断是否获取到了锁,Lock可以判断是否获取到了锁. Synchronized会自动释放锁,Lock必须手动释放锁. Synchronized线程1获得锁之后阻塞,等待锁的线程2会一直等下去(死等).Lock不一定会死等. Synchronized可重入锁.不可中断.非公平锁.Lock是可重入锁.选择是否可中断.可以选择是否公平. Synchronized适合锁少量的代码同步问题.

随机推荐