addEventListener与attachEvent区别
2024-08-22 13:43:58
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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
最新文章
- 关于datatime 时间处理模块:
- sql server 分页存储过程
- XP下使用IIS访问asp出现无权查看网页问题的解决办法
- UVALive 3211 Now or later(2-sat)
- unity3d 场景间数据传递
- apache 上配置多个django工程
- HTML5录音控件
- IIS中 flv、swf 文件无法播放
- swift两种获取相册资源PHAsset的路径的方法(绝对路径)
- Sql Server查询性能优化之不可小觑的书签查找
- Unity之如何从fbx提取Animation clip文件
- Java十进制数转二进制的方法
- java -version 版本号与path中配置的不一致
- Oracle PLSQL读取(解析)Excel文档
- 《AngularJS深度剖析与最佳实践》笔记: 第二章 概念介绍
- PhpDocumentor
- WCF 采用net.tcp协议实践(转)
- Linux之linux入门
- 关于域名如何指向WordPress homepage问题的解决
- php学习十四:抽象,接口和多态