12-JS特效-事件监听原理

使用onclick绑定事件没办法绑定多个事件：

//案例
document.onclick = function () {
console.log("第一句");
}
document.onclick = function () {
console.log("第二句");
}

执行结果：只输出“第二句”，因为前面的事件被覆盖了

问题：绑定一个新的，原来的就得被覆盖掉。

解决思路：绑定之前，先把事件的驱动程序记录下来。触动的时候，先把老事件执行一下就可以了。

事件监听原理：

我们可以自己封装一个方法，让onclick也可以实现多个事件的绑定。

function eventListener(ele,eve,fun){
var oldEvent = ele["on"+eve];
//重新绑定事件
ele["on"+eve] = function(){

//判断老事件是否存在，如果存在，先执行老事件，在执行新事件
//1.如果存在，老事件=事件的绑定函数 == 整个函数 == true 。
//2.如果不存在，是null ==false.

//if(typeof oldEvent == "function"){
if(oldEvent){
oldEvent();//如果存在那么先执行老事件，在执行新事件，
fun();
}else{
fun();
}
}
}

上面封装的方法是事件监听addEventListener()的原理。

如果是IE678的attachEvent();它后绑定的事件先执行，所以需要先执行新事件，再执行老事件。