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区别的更多相关文章

  1. addEventListener()及attachEvent()区别分析

    Javascript 的addEventListener()及attachEvent()区别分析 Mozilla中: addEventListener的使用方式: target.addEventLis ...

  2. [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】

    1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...

  3. Javascript添加事件的addEventListener()及attachEvent()区别分析,事件委托

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...

  4. ie和火狐事件addEventListener()及attachEvent()区别分析

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...

  5. addEventListener和attachEvent区别

    addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome.FireFox.Opera.Safari.IE9.0及其以上版本都支持该函数:但是,IE8.0及其以 ...

  6. Javascript 的addEventListener()及attachEvent()区别分析

    大家都知道事件的用法就是当某个事件(状况)被触发了之后就会去执行某个Function, 尤其是Javascript, 在当红AJAX的催化下, 了解Javascript的Event用法更加重要, 在这 ...

  7. addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】

    yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...

  8. Javascript中addEventListener和attachEvent的区别

    在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...

  9. addEventListener和attachEvent以及element.onclick的区别

    addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...

随机推荐

  1. self attention pytorch代码

    实现细节; 1.embedding 层 2.positional encoding层:添加位置信息 3,MultiHeadAttention层:encoder的self attention 4,sub ...

  2. uboot使用脚本

    使用mkimage命令 # mkimage -A ARM -O linux -T script -C none -n "script" -d *.sh *.img # tftp x ...

  3. Redis数据结构和使用场景,redis内存淘汰策略

    什么样的数据适合放入Redis? sql执行耗时特别久,且结果不频繁变动的数据,适合放入Redis. Redis是单线程的,为什么会这么快? 纯内存操作 单线程操作,避免频繁的上下文切换 采用了非阻塞 ...

  4. linux 显示不可见字符

    在Linux中,cat -A file可以把文件中的所有可见的和不可见的字符都显示出来,在Vim中,如何将不可见字符也显示出来呢?当然,如果只是想在Vim中查看的话,可以这样:%!cat -A在Vim ...

  5. Android笔记(七十三) Android权限问题整理 非常全面

    Android权限系统非常庞大,我们在Android系统中做任何操作都需要首先获取Android系统权限,本文记录了所有的Android权限问题,整理一下分享给大家. 访问登记属性 android.p ...

  6. SCADA系统构架的安全分析总结

    概念: SCADA 数据采集与监控 Supervisory Control And Data Acquisition  .包括了计算机设备  工业控制组件    网络 组成部件 ,SCADA 系统被用 ...

  7. 12.安装olny office服务---不成功

    安装olny office服务 在01.centos7环境准备的基础上安装olny office服务 参考博客:https://blog.csdn.net/networken/article/deta ...

  8. ubuntu---对比工具Meld

    Beyond Compare是商业软件,下载地址:http://www.scootersoftware.com/download.php.下载完直接运行或者通过dpkg安装即可. 其实Linux下文本 ...

  9. linux第三天

    一.用户的类型   1.root管理员:所有权限(r w x)   2.文件拥有者(u):谁创建谁拥有   3.组 (g):用户组   4.其它用户(o):不属于用户组,也不是文件的创建者,不是管理员 ...

  10. 软件测试过程中如何区分什么是功能bug,什么是需求bug,什么是设计bug?

    问题描述: 测试过程中如何区分什么是功能bug,什么是需求bug,什么是设计bug? 精彩答案: 会员 土土的豆豆: 本期问题其实主要是针对不同方面或纬度上对于bug的一个归类和定位. 个人认为,从软 ...