attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method

相同点:

  它们都是dom对象的方法,可以实现一种事件绑定多个事件处理函数。

obj = document.getElementById("testdiv");
obj.οnclick=function(){alert('1');};
obj.οnclick=function(){alert('2');};
obj.οnclick=function(){alert('3');};
// 当使用上边三句话进行事件绑定的时候,很明显当点击ID为testdiv对象时,只能执行//最后一句脚本。因为onclick作为一个事件处理对象,只能赋一个值,后面的赋值自动覆//盖前面的

使用attachEvent和addEventListener时则可以实现多个事件处理函数的调用

obj = document.getElementById("testdiv");
obj.attachEvent('onclick',function(){{alert('1');});
obj.attachEvent('onclick',function(){{alert('2');});
obj.attachEvent('onclick',function(){{alert('3');});//点击时,三个方法都会执行

obj = document.getElementById("testdiv");
obj.addEventListener('click',function(){{alert('1');},false);
obj.addEventListener('click',function(){{alert(2');},false);
obj.addEventListener('click',function(){{alert('3');},false);//点击时,三个方法都会执行

不同点:

  1.attachEvent是IE有的方法,它不遵循W3C标准,而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener,所以实际开发中需分开处理。

  2.多次绑定后执行的顺序是不一样的,attachEvent是后绑定先执行,addEventListener是先绑定先执行。

obj = document.getElementById("testdiv");
obj.attachEvent('onclick',function(){{alert('1');});
obj.attachEvent('onclick',function(){{alert('2');});
obj.attachEvent('onclick',function(){{alert('3');});
//执行顺序是alert(3),alert(2),alert(1);

obj = document.getElementById("testdiv");
obj.addEventListener('click',function(){{alert('1');},false);
obj.addEventListener('click',function(){{alert('2');},false);
obj.addEventListener('click',function(){{alert('3');},false);
//点击obj对象时,执行顺序为alert('1'),alert('2'),alert('3');

  3.绑定时间时,attachEvent必须带on,如onclick,onmouseover等,而addEventListener不能带on,如click,mouseover。这个区别在以上代码中可见。

  4.attachEvent仅需要传递两个参数,而addEventListener需要传递三个参数,这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段:捕获阶段、目标阶段和冒泡阶段。顺序为:捕获阶段(根节点到子节点检查是否调用了监听函数)→目 标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件,请调用两次 addEventListener,一次将 useCapture 设置为 true,第二次再将useCapture 设置为 false。

为了解决浏览器的兼容性可以写如下代码:

function addEvent(elm, evType, fn, useCapture)
{if (elm.addEventListener) {// W3C标准elm.addEventListener(evType, fn, useCapture);return true;}else if (elm.attachEvent) {//IEvar r = elm.attachEvent(‘on‘ + evType, fn);//IE5+return r;}else {elm['on' + evType] = fn;//DOM事件}
}

        function addEvent(element, type, handler) {//为每一个事件处理函数分派一个唯一的IDif (!handler.$$guid) handler.$$guid = addEvent.guid++;//为元素的事件类型创建一个哈希表if (!element.events) element.events = {};//为每一个"元素/事件"对创建一个事件处理程序的哈希表var handlers = element.events[type];if (!handlers) {handlers = element.events[type] = {};//存储存在的事件处理函数(如果有)if (element["on" + type]) {handlers[0] = element["on" + type];}}//将事件处理函数存入哈希表handlers[handler.$$guid] = handler;//指派一个全局的事件处理函数来做所有的工作element["on" + type] = handleEvent;};//用来创建唯一的ID的计数器addEvent.guid = 1;function removeEvent(element, type, handler) {//从哈希表中删除事件处理函数if (element.events && element.events[type]) {delete element.events[type][handler.$$guid];}};function handleEvent(event) {var returnValue = true;//抓获事件对象(IE使用全局事件对象)event = event || fixEvent(window.event);//取得事件处理函数的哈希表的引用var handlers = this.events[event.type];//执行每一个处理函数for (var i in handlers) {this.$$handleEvent = handlers[i];if (this.$$handleEvent(event) === false) {returnValue = false;}}return returnValue;};//为IE的事件对象添加一些“缺失的”函数function fixEvent(event) {//添加标准的W3C方法event.preventDefault = fixEvent.preventDefault;event.stopPropagation = fixEvent.stopPropagation;return event;};fixEvent.preventDefault = function () {this.returnValue = false;};fixEvent.stopPropagation = function () {this.cancelBubble = true;};

var addEvent = (function () {if (document.addEventListener) {return function (el, type, fn) {if (el.length) {for (var i = 0; i && el.length; i++) {addEvent(el[i], type, fn);}} else {el.addEventListener(type, fn, false);}};} else {return function (el, type, fn) {if (el.length) {for (var i = 0; i && el.length; i++) {addEvent(el[i], type, fn);}} else {el.attachEvent('on' + type, function () {return fn.call(el, window.event);});}};}})();

转载于:https://www.cnblogs.com/Joe-and-Joan/p/10091092.html

JavaScript中的attachEvent和addEventListener相关推荐

  1. attachEvent 与addEventListener到底有什么区别呢?

    2019独角兽企业重金招聘Python工程师标准>>> attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attach ...

  2. 理解JavaScript中的事件

    在很多语言的学习中,"事件"都是一个比较难理解,但是又是一个很重要的概念.JavaScript中的事件处理也是一样,正因为有了事件处理,才会出现Ajax拖动的效果.本文就讨论一下J ...

  3. 适配器在JavaScript中的体现

    适配器设计模式在JavaScript中非常有用,在处理跨浏览器兼容问题.整合多个第三方SDK的调用,都可以看到它的身影. 其实在日常开发中,很多时候会不经意间写出符合某种设计模式的代码,毕竟设计模式就 ...

  4. JS:attachEvent和addEventListener方法

    <SCRIPT LANGUAGE="JavaScript"> <!--     /**************************************** ...

  5. 【转】理解JavaScript中的事件处理

    这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需. 转载地址:http://www.cnblogs.com/binyong/articles/1750263.h ...

  6. javascript中0级DOM和2级DOM事件模型浅析

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  7. attachEvent 与 addEventListener的使用

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

  8. JavaScript中事件回顾

    事件其实在第一次学习JavaScript的时候就接触了,一行非常简单的代码 alert('Hello JavaScript!!!')就诠释了什么是事件.事件是什么呢?事件在基于浏览器编程的语言Java ...

  9. javascript中Doom操作方法总结

    1:Doom组成  (节点篇) doom是由节点组成,元素标签,它只是节点一中 节点类型 节点一共分为12种类型 常用节点 1:元素类型       3:文本类型     8:注释类型   9:文档类 ...

  10. JavaScript中绑定事件监听函数的通用方法[ addEvent() ]

    上篇文章讲到了事件绑定的3中常用方法:传统绑定.W3C绑定方法.IE绑定方法.但是,在实际开发中对于我们来讲重要的是需要一个通用的.跨浏览器的绑定方法.如果我们在互联网上搜索一下会发现许多方法,一下是 ...

最新文章

  1. 用策略屏蔽135 139 445 3389端口+网络端口安全防护技
  2. 《系统集成项目管理工程师》必背100个知识点-100信息技术服务标准
  3. hdu 1754 I Hate It(线段树之 单点更新+区间最值)
  4. 在中国,有这样一些村落
  5. 第五十二期:Java开发数据库设计的14个技巧,你知道几个?
  6. vs cpp生成h文件_lib 和 dll 的区别、生成以及使用详解
  7. docker build run 卡住_还在使用第三方Docker插件?SpringBoot官方插件真香!
  8. error C2440: “<function-style-cast>”: 无法从“IplImage *”转换为“cv::Mat”
  9. 文件无法复制到c盘的解决办法
  10. win32实现两个透明窗口联动
  11. Debian11更换阿里源
  12. linux vi 拷贝多行,vi 整行 多行 复制与粘贴
  13. protobuf如何使用Protogen工具生成CS代码详细教学篇
  14. 组装高性能服务器电脑,工作站专用 7.3万元高性能服务器电脑配置推荐
  15. 电商数据分析——基于hive数仓,实现大数据分析
  16. python批量分析表格_老板让我从几百个Excel中查找数据,我用Python一分钟搞定!...
  17. 基于Arduino的PS2机械臂遥控小车(L298N)傻瓜教程
  18. 2012年陈乔恩主演都市胜女华丽猎爱偶像剧-胜女的代价
  19. (PTA)6-7 使用函数计算两个复数之积 (10分)
  20. 咧咧一下“汉语编程”

热门文章

  1. 生物医学信号检测与处理实验3——1微电阻梁
  2. Eclipse 优化
  3. ffmpeg 反复推流_FFmpeg 推流问题记录
  4. log4j.xml配置文件详解
  5. ESP32黑客帝国数字雨动画,矩阵它来了,ESP32+ST7789V液晶屏Arduino
  6. Arduino GPS 车速表(Arduino流体力学燃油效率计)(更新:2022.7.3)
  7. java suite_Spring Tool Suite 配置和使用
  8. SAP ABAP Development Tool 如何设置黑色主题
  9. 信号与系统 --- 复指数函数(个人学习笔记)
  10. 计算机辅助设计技术基础教程,《计算机辅助设计技术基础》课程教案.doc