今天，我学到了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 = "我是第二个方法";
}

再次单击按钮查看结果： 第一个方法的结果并不会被覆盖掉，那到底是什么原理让它没有覆盖第一次的结果呢，接下来就是我对事件监听器实现的简单理解，忽略第三个参数，只考虑前两个参数的实现。

//参数1事件名(不能加on)，参数2方法名(要绑定的方法)，参数3事件源(就是上面需要绑定单击时间的按钮)
function myLisentener(str,fn,ele) {
    //判断位置要注意：如果进入绑定事件本身，那么该事件已经本绑定了
    //所以获取旧的事件必须在新的事件绑定之前
    var oldEvent = ele["on" + str];
    ele["on" + str] = function () {
        //不能直接执行函数，因为我们还不知道以前有没有绑定我同样的事件
        //进行判断，如果以前有过绑定事件，那么把以前的执行完毕在执行现在的事件，如果没有就直接执行
        //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
        //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
        if (oldEvent) {
            //因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数
            oldEvent();
           	fn();
        } else {
            //没有绑定过事件
            fn();
        }
    }
}

我们使用自己的函数来再次调用按钮的两次单击事件验证是否成功， 实现代码很短，只是为了方便记忆事件监听器，自己实现一下能加深对其的理解和使用。