对JS中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 = "我是第二个方法"