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

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,256评论 1 11
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,126评论 3 11
  • JavaScript 与 HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬...
    threetowns阅读 209评论 0 0
  • 事件流 JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互...
    DHFE阅读 594评论 0 3
  • 如何批量操作 css 如何获取 DOM 计算后的样式 使用getComputedStyle获取元素计算后的样式 实...
    _Dot912阅读 423评论 1 3
  • 不久前,我在朋友圈发了一张在学堂在线学习《财务分析与决策》的结课证明,因为我的专业和工作跟这个八竿子也打不着关系,...
    何有理阅读 751评论 0 2
  • 《战狼2》一战成名,所有人都在仰望吴京,仰望一个热血男儿。但也有些人,注意到了他的妻子——谢楠。 吴京有今天的成绩...
    她生活阅读 295评论 0 0
  • 我现在是艺术培训从事教育工作(教务管理等)昨天跟领导交谈中,转变了一个重要的观念。很多时候出现问题,第一个想法这个...
    王晓杰_2c01阅读 46评论 0 0
  • 你说, 你想看海 我应允, 带你乘风破浪 你说, 你想登山 我应允, 带你一路攀登 你说, 我的眉头久皱不开 一道...
    皇氏三墳阅读 167评论 0 4
  • 从刚开始加入读书营每天都可以完成每日剽悍和能量按钮,到现在的三天打鱼 两天晒网我到底经历了什么? 在听到老铁朱鹮同...
    清浅_精油疗法康复理疗师阅读 184评论 0 1