addEventListener与attachEvent区别
DOM2级事件处理程序
DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作:
- addEventListener
- removeEventListener
所有的DOM节点都包含这两个方法,并且他们都接受三个参数:
1.事件类型
2.事件处理方法
3.布尔参数,默认false
(true捕获阶段调用事件处理方法;false冒泡阶段调用事件处理方法。)
//addEventListener
let box = document.querySelector('.box')
box.addEventListener('click',function(){
console.log('box clicked...')
})
function xxx(){console.log('box clicked...')}
box.addEventListener('click',xxx) //添加事件
box.removeEventListener('click',xxx) //删除事件
简写的onclick和addEventListener区别
box.onclick = function(){ console.log('1') }
box.onclick = function(){ console.log('2') } //会覆盖1
box.addEventListener('click',function(){ console.log('1') })
box.addEventListener('click',function(){ console.log('2') }) //不会覆盖
IE7,8的绑定事件方法
IE不支持addEventListener和removeEventListener方法
实现了两个类似的方法:
- attachEvent
- detachEvent
这两个方法都接受两个相同的参数。
1.事件处理程序名称
2.事件处理程序方法
IE只支持事件冒泡
let box = document.querySelector('.box')
function xxx(){console.log('box clicked...')}
box.attachEvent('onclick',xxx)
兼容性
attachEvent——兼容:IE7、IE8;不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
addEventListener——兼容:firefox、chrome、IE、safari、opera;不兼容IE7、IE8
作者:阿鲁提尔
链接:https://www.jianshu.com/p/4af0476a08c9
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
addEventListener与attachEvent区别的更多相关文章
- addEventListener()及attachEvent()区别分析
Javascript 的addEventListener()及attachEvent()区别分析 Mozilla中: addEventListener的使用方式: target.addEventLis ...
- [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】
1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...
- Javascript添加事件的addEventListener()及attachEvent()区别分析,事件委托
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
- ie和火狐事件addEventListener()及attachEvent()区别分析
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
- addEventListener和attachEvent区别
addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome.FireFox.Opera.Safari.IE9.0及其以上版本都支持该函数:但是,IE8.0及其以 ...
- Javascript 的addEventListener()及attachEvent()区别分析
大家都知道事件的用法就是当某个事件(状况)被触发了之后就会去执行某个Function, 尤其是Javascript, 在当红AJAX的催化下, 了解Javascript的Event用法更加重要, 在这 ...
- addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】
yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...
- Javascript中addEventListener和attachEvent的区别
在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...
- addEventListener和attachEvent以及element.onclick的区别
addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...
随机推荐
- SVN 提交失败 非LF行结束符
来源:http://programerni.diandian.com/post/2012-09-06/40037220960 我使用svn一直很顺利,今天在改了两个地方之后,提交时输入了两句话(只有两 ...
- 使用python库relate搭建LMS学习管理系统
Relate is an Environment for Learning And TEaching Relate是在 Django上面构建的,可以快速搭建LMS系统,该系统可以方便学习管理和在线课程 ...
- Js网站开发学习第一天
1.登录时,记住密码单选框,鼠标移上去显示div里的内容,移开则消失: <head> <meta http-equiv="Content-Type" conten ...
- 解决Centos7安装python3后pip工具无法使用
问题描述: Centos7安装python3,正常流程全部配置完成,python3,pip3的软链接也建立了 但是python3可以正常使用,而pip3报错,无法找到文件或目录 解决方法: which ...
- pipeline和channel的区别
pipeline和channel的区别 在golang中,学到channel时,往往都会产生一些疑惑,和channel的区别是什么? 以下就是区别: difference channel pipeli ...
- 加速 Unity 不同平台打包的一种思路
Unity打包总的来说还不是一件特别复杂的事情, 但是我们知道任何关于跨平台(多线程等)这类问题, 总是会把事情搞得复杂起来. 以前项目的打包是通过Jenkins对一个工程下对不同平台多次打包, 不可 ...
- Druid Spring Boot Starter 从配置到简单运行 -解决zone不匹配 -解决dataSource加载失败
Druid Spring Boot Starter 中文 | English Druid Spring Boot Starter 用于帮助你在Spring Boot项目中轻松集成Druid数据库连接池 ...
- mysql数据库中的多表查询(内连接,外连接,子查询)
用两个表(a_table.b_table),关联字段a_table.a_id和b_table.b_id来演示一下MySQL的内连接.外连接( 左(外)连接.右(外)连接.全(外)连接). MySQL版 ...
- DevExpress21:SplashScreenManager控件实现启动闪屏和等待信息窗口
DevExpress中SplashScreenManager这个控件的主要作用就是显示程序集加载之前的进度条显示和进行耗时操作时候的等待界面. 一.SplashScreenManager控件的使用 1 ...
- jquery定义链接跳转的高亮显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...