js onclick addeventlistener 区别

最新推荐文章于 2023-05-05 19:12:44 发布

毅江

最新推荐文章于 2023-05-05 19:12:44 发布

阅读量325

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签： addeventlistener

本文链接：https://blog.csdn.net/u013362969/article/details/88410505

javaScript 专栏收录该内容

32 篇文章

订阅专栏

本文对比了onclick()和addEventListener()两种事件绑定方法。onclick在所有浏览器中都可用，但只能绑定一个事件处理器，且后绑定的会覆盖前绑定的。而addEventListener允许绑定多个事件处理器，并能指定事件处理阶段，更灵活，适用于现代浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

onclick()这种写法是DOM0级规范的写法，是所有的浏览器支持的，但是这种写法有不能同时绑定多个事件、使代码耦合在了一起的弊端。但是addEventListener() 是DOM2标准中定义的方法，它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序。既然这个是DOM2标准中定义的，那么只有支持DOM2级事件处理程序的浏览器才支持这个方法（IE9,Firefox,Safari,Chrome和Opera支持）。

一、onclick()方式

window.onload = function() {
                var container = document.querySelector("#container");
                container.onclick = function() {
                    console.log("第一次onclick事件");
                }
                container.onclick = function() {
                    console.log("第二次onclick事件");
                }
            }　　　　　
            //运行结果：“第二次onclick事件”

运行结果是第二个onclick把第一个onclick给覆盖了，虽然大部分情况用on就可以完成想要的结果，但是有时又需要执行多个相同的事件，很明显如果用on不能完成

二、addEventListener()方法

window.onload = function() {
                var container = document.querySelector("#container");
                container.addEventListener("click", function() {
                    console.log("第一个addEventListener事件");
                })
                container.addEventListener("click", function() {
                    console.log("第二个addEventListener事件");
                })
            }
            //运行结果：
            //"第一个addEventListener事件"
            //"第二个addEventListener事件"

addEventListenert方法第一个参数填写事件名，第二个参数是一个函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序。true代表捕获阶段处理， false代表冒泡阶段处理。第三个参数可以省略，大多数情况也不需要用到第三个参数，不写第三个参数默认false