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. angular异步获取数据后在ngOnInit中无法获取,显示undefined解决办法

    两种方法 1 通过*ngif动态加载要数据渲染的dom 2 通过路由导航resolve 第一种感觉太麻烦了,要是一个页面请求多个接口,那就不得不写多个*ngif,本人还是更倾向与第二种发法 具体步骤: ...

  2. fastjson源码分析之序列化

    fastJson是很常用的序列化工具,用了这么久一直想底层看一下它的设计,探究一下它序列化和反序列化效率高的秘密.现在从最基础的用法开始,一点点揭开fastJson神秘的面纱.(版本:1.2.50) ...

  3. 部署---Apache服务器安装SSL证书

    在云服务器的证书控制台下载Apache版本证书,下载到本地的是一个压缩文件. 解压后里面包含: _public.crt文件是证书文件, _chain.crt是证书链(中间证书)文件, .key文件是证 ...

  4. ansible之基础篇(一)

    ansible简介 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量 ...

  5. 腾讯云服务器搭建WampServer环境

    软件环境Windows Server 2008 R2 企业版 SP1 64位 刚刚进入 Windows Server ,你会看到以下界面: 列出了服务器的基础信息和常用配置下载 XAMPP https ...

  6. C 语言究竟是一门怎样的语言?

    C语言是计算机及其相关专业的必修课,很多编程爱好者也是从C语言开始的编程之旅. C语言之父镇楼! 相较于GO,python等语言而言C语言真可以算是老古董了(发明于上世纪70年代),但是也正因为其历史 ...

  7. 《少年先疯队》第八次团队作业:Alpha冲刺第四天

    前言    第四天冲刺会议    时间:2019.6.17    地点:宿舍 4.1 今日完成任务情况以及遇到的问题.   4.1.1今日完成任务情况 姚玉婷:管理员功能模块中,收费管理功能的实现. ...

  8. tensorflow 运行效率 GPU memory leak 问题解决

    问题描述: Tensorflow 训练时运行越来越慢,重启后又变好. 用的是Tensorflow-GPU 1.2版本,在GPU上跑,大概就是才开始训练的时候每个batch的时间很低,然后随着训练的推进 ...

  9. Tensorflow细节-P186-队列与多线程

    先感受一下队列之美 import tensorflow as tf q = tf.FIFOQueue(2, "int32") # 创建一个先进先出队列 # 队列中最多可以保存两个元 ...

  10. php函数基本语法之自定义函数

    PHP提供了功能强大的函数,但这远远满足不了需要,程序员可以根据需要自己创建函数.本节就开始学习创建函数的方法.大理石平台价格表 我们在实际开发过程当中需要有很多功能都需要反复使用到,而这些反复需要使 ...