对JS中addEventListener底层实现原理的个人理解

最新推荐文章于 2024-07-16 10:02:37 发布

原创

最新推荐文章于 2024-07-16 10:02:37 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #底层实现

本文探讨了JavaScript中addEventListener的使用，特别是在处理按钮点击事件时如何避免方法覆盖的问题。作者通过实例展示了如何自己实现一个简单的事件监听器，并解释了其工作原理。

今天，我学到了js中的

addEventListener

然后我决定，自己制作一个简单的事件监听器！

当我们需要用一个按钮的单击去触发两个方法的时候，会发现前一个总会被第二个方法的结果覆盖掉，我现在定义了一个id为“btn”的按钮：

btn = document.getElementById("btn");
p1 = document.getElementsByTagName("p")[0];
p2 = document.getElementsByTagName("p")[1];

btn.onclick = function fn1() {
    p1.innerText = "我是第一个方法";
};
btn.onclick = function fn2() {
    p2.innerText = "我是第二个方法";
};

这时候我们去单击按钮，会显示
在这里插入图片描述
很明显只显示了第二个方法的结果，这时候我们就需要使用事件监听器，

btn.addEventListener("click",fn1);
btn.addEventListener("click",fn2);
function fn1() {
    p1.innerText = "我是第一个方法";
}
function fn2() {
    p2.innerText = "我是第二个方法";
}

再次单击按钮查看结果：
在这里插入图片描述
第一个方法的结果并不会被覆盖掉，那到底是什么原理让它没有覆盖第