addEventListener与attachEvent
一、attachEvent和addEventListener
(一)addEventListener
addEventListener() 方法用于向指定元素添加事件句柄。使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
语法:element.addEventListener(event, function, useCapture)
event (必须)字符串,指定事件名。注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。
function (必须)指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture (可选)布尔值,指定事件是否在捕获或冒泡阶段执行。【true:事件句柄在捕获阶段执行; false:默认,事件句柄在冒泡阶段执行】
可以添加许多事件,添加的事件不会覆盖已存在的事件。
示例:给button绑定两个点击事件,点击按钮时,两个事件都是执行,执行顺序为:myFunction 、someOtherFunction ,不会覆盖。(当然也可以绑定不同的事件)
var obj = document.getElementById("myBtn") obj.addEventListener("click", myFunction); obj.addEventListener("click", someOtherFunction);
示例:使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄
// 添加 <div> 事件句柄 document.getElementById("myDIV").addEventListener("mousemove", myFunction);// 移除 <div> 事件句柄 document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
(二)attachEvent
attachEvent方法两个参数:第一个参数为事件名称,第二个参数为接收事件处理的函数;
可以添加许多事件,添加的事件不会覆盖已存在的事件。
二、attachEvent和addEventListener异同点
相同点:
都是dom对象的方法,可以实现一种事件绑定多个事件处理函数。
不同点:
1.attachEvent是IE有的方法,它不遵循W3C标准,而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener,所以实际开发中需分开处理。
2.多次绑定后执行的顺序是不一样的,attachEvent是后绑定先执行,addEventListener是先绑定先执行。
三、兼容性
addEventListener——兼容:firefox、chrome、IE、safari、opera;不兼容IE7、IE8
attachEvent——兼容:IE7、IE8;不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
转载于:https://www.cnblogs.com/songForU/p/10905041.html
addEventListener与attachEvent相关推荐
- 关于addEventListener和attachEvent的初步探讨
关于addEventListener和attachEvent IE不对应addEventListener,只能使用attachEvent,所以首先需要判断你的浏览器对应的是哪个事件函数 if (win ...
- addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】
yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...
- addEventListener和attachEvent的区别
转 addEventListener和attachEvent的区别 区别如下 addEventListener共有3个参数,如下所示: element.addEventListener(type,li ...
- Javascript 的addEventListener()及attachEvent()区别分析
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
- 事件绑定-addEventListener()和attachEvent()的区别及用法
JavaScript-DOM-事件绑定 当我们为元素绑定一个单击事件时,通常会想到element.οnclick=function(){},但是要绑定多个单击函数时却会失效,并且会被最新的响应函数 ...
- addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
- JavaScript之事件触发on和事件监听addEvent及addEventListener的区别和作用
一.on事件 为dom节点添加多个on事件只会执行最后的那个事件,因为最后的指定的on事件指向最后的那个函数,代码如下所示: function method1(){console.log('我是方法1 ...
- 360兼容模式下 对象不支持“attachEvent”属性
在360模式下,js程序中报 对象不支持"attachEvent"属性 报错代码如下: if (window.VBArray && window.addEventL ...
- 从jQuery的缓存到事件监听
很久以前,我还在cnblogs里面逛的时候就提出过一个问题(刚找了半天没找到).不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery********* ...
- JavaScript移除绑定在元素上的匿名事件处理函数
前言: 面试的时候有点蒙,结束之后想想自己好像根本就误解了面试官的问题,因为我理解的这个问题本身就没有意义.但是当时已经有一些思路,但是在一个点上被卡住. 结束之后脑子瞬间灵光,想出了当时没有迈出的那 ...
最新文章
- 缩进动画Scaleanimation的一个小示例
- 12-Generic Timer
- 若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导出
- 【k8s学习笔记】第二篇:在Ubuntu系统中安装kubelet,kubeadm和kubectl
- mysql noinstall 安装_mysql-noinstall安装指南
- vb net的定时循环_Python3-定时任务的四种实现方式
- Android Paint类属性说明
- 在git中取消删除已删除的文件
- Anroid开发中常用快捷键
- 用通俗易懂的方式告诉你什么是EM算法
- android SDL系列讲解(十三) 播放音乐库 SDL_mixer教程
- 一个资源丰富的在线小程序社区推荐
- 上传MacOS APP到AppStore
- Flutter 快速上手定时器/倒计时及实战讲解
- NanoHTTPD----SimpleWebServer处理请求过程
- 使用MATLAB连接USRP实现收发OFDM功能代码说明
- 手机sar值_手机SAR值仪器测试全过程
- 2021年起重机械指挥考试技巧及起重机械指挥证考试
- OLED显示文字,字母,数字
- 201619101025刘洋