onclick与addEventListener区别

onclick与addEventListener区别这次做项目遇到了这个问题,本来习惯性的每次都写的是addEventListener绑定click事件。但是当用addEventListener绑定了多次click事件的时候,引发了我的思考,这两者有区别吗?具体的事件分析可查看另一篇文章结论:1.onclick事件在同一时间只能指向唯一对象2.addEventListener给一个事件注册多个listener3.addEventLi…

大家好,又见面了,我是你们的朋友全栈君。

这次做项目遇到了这个问题,本来习惯性的每次都写的是addEventListener绑定click事件。但是当用addEventListener绑定了多次click事件的时候,引发了我的思考,这两者有区别吗?具体的事件分析可查看另一篇文章

结论:

1.onclick事件在同一时间只能指向唯一对象

2.addEventListener给一个事件注册多个listener

3.addEventListener对任何DOM都是有效的,而onclick仅限于HTML

4.addEventListener可以控制listener的触发阶段,(捕获/冒泡)。对于多个相同的事件处理器,不会重复触发,不需要手动使用removeEventListener清除

5.IE9使用attachEvent和detachEvent

探究:

onclick添加事件:

element.onclick = functionRef;

functionRef是一个函数,通常是在别处声明的函数名,或者是一个函数表达式

onclick删除事件:

element.onclick = null;

onclick与addEventListener区别

DOM格式如上,javascript代码

onclick与addEventListener区别

运行结果:

可想而知,只会弹出一个弹出框,虽然绑定了两次,‘我是click2’

一个click处理器在同一时间只能指向唯一的对象。因此就算对于一个对象绑定了多次,但是仍然只会出现最后的一次绑定。

addEventlistener绑定click事件:

currentTarget.addEventListener(type, listener, option)

同样上面的DOM结构,对应的javascript代码:

onclick与addEventListener区别

运行结果:

两次绑定的事件,都能够成功运行,也就是前后弹出 ‘我是addEvent1’ ‘我是addEvent2’

由此可知,对于一个可以绑定的事件对象,想多次绑定事件都能运行,选用addEventListener

通过addEventListener添加的事件必须通过相对应的为removeListener注销事件。但是如果像上面的用匿名函数的方式注册的事件,不能使用removeListener注销,因为没用对应事件的引用。

所以注册事件如果需要取消,最好使用一个引用,即:

var eventName = function () {
    //something
};

也正是这种方式,对于一个对象多次绑定同样的eventName,那么不会重复执行,只会执行一次。对于上面的匿名函数,就算内容一样,也会依次执行,因为并不能算是相同事件处理器

里面的this引用,不是window对象,而是触发事件的元素的引用。

对于IE9之前,相对应的是attachEvent和detachEvent

总结:

1.onclick事件在同一时间只能指向唯一对象

2.addEventListener给一个事件注册多个listener

3.addEventListener对任何DOM都是有效的,而onclick仅限于HTML

4.addEventListener可以控制listener的触发阶段,(捕获/冒泡)。对于多个相同的事件处理器,不会重复触发,不需要手动使用removeEventListener清除

5.IE9使用attachEvent和detachEvent

参考文献:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158284.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • PetaLinux学习笔记 1

    PetaLinux学习笔记 1迟迟没有做底板,所以只能把Linux写到FLASH上了。还好这个FLASH够大。官方所说的有点问题,最后一句改成petalinux-package–boot–fsbl~/FTP_Folder/ax_peta/images/linux/zynq_fsbl.elf–fpga–u-boot–kernel–force再烧进去就可以跑了。手册ug821有说明,先搞清楚它…

  • getenforce命令什么意思_安卓修改selinux策略

    getenforce命令什么意思_安卓修改selinux策略使用getenforce命令可以在Linux下查看是否开启了SELinux。下面是Linuxgetenforce命令的使用方法。[root@DB-Server~]#getenforceEnforcing如何开启、关闭SELinux呢?最简单的方式使用setenforce,这样不用重启服务器,但是该命令只能将SeLinux在enforcing、permissive这两种模式之间切换,服务器重启后,又会恢复到/etc/selinux/config下,也就是说setenforce的修改是不能持久的。

  • Asp中session使用方法详解[通俗易懂]

    Asp中session使用方法详解[通俗易懂]Session对象可以使用Session对象存储特定用户会话所需的信息。这样,当用户在应用程序的Web页之间跳转时,存储在Session对象中的变量将不会丢失,而是在整个用户会话中一直存在下去。当用户请求来自应用程序的Web页时,如果该用户还没有会话,则Web服务器将自动创建一个Session对象。当会话过期或被放弃后,服务器将终止该会话。Sessio

  • phpstorm 激活码(注册激活)[通俗易懂]

    (phpstorm 激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~ML…

  • 自己搭建git服务器_搭建git服务器web界面

    自己搭建git服务器_搭建git服务器web界面docker安装gitea服务器1.安装docker:yuminstalldocker-y2.启动docker服务:systemctlstartdocker3.查看docker版本:docker-v4.配置镜像加速:vi/etc/docker/deamon.json修改内容{ “registry-mirrors”:[ “http://reg-mirror.qiniu.com/”, “http://hub-mirror.c.163.com/” ]}5

  • 海伦公式_求三角形面积的海伦公式

    海伦公式_求三角形面积的海伦公式关于海伦公式(Heron'sformula或Hero'sformula)的历史海伦公式亦称“海伦-秦九韶公式”。此公式(利用三角形的三条边长来求三角形面积)相传是亚历山大港的海伦发

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号