浅析js绑定同一个事件依次触发问题系列（一）

算了还是上代码吧记得写过这篇文章，但是找不到了（对，就是找不到了，算了再写一遍吧）也是在群中有人问这个绑定不同事件或者同一个事件的依次触发问题

个人建议如果是一个事件的话那么最好写成函数，还有人问如果我下一个函数要依赖上一个函数执行是否完毕来执行（就是上一个函数如果执行完毕我才执行下一个函数，如果没有执行完毕那么就不执行下一个函数）

我的思路是定义一个变量设置为false 用判断来写这里就不写代码了下一篇写这个代码提一下好了扯淡扯远了开始上代码

css部分如下

.test{width: 100%; height: 300px; background: red; }

html部分如下

<div id="test">aaaaaaa</div>

js部分

window.onload=function(){
    var Test=document.getElementById('test')
    Test.addEventListener("click",function(event){
        event.preventDefault();
        alert(1)
    },false);

    Test.addEventListener("click",function(event){
        alert(2)
    },false);
    
    Test.addEventListener("click",function(event){
        alert(3)
    },false)
}

大家可以测试一下触发的顺序是依次进行的也就是依次弹出来 1 2 3 完毕。。。

但是这个东西是不兼容的（当然是坑爹的ie）因为ie有自己的办法

咱们看一下ie是怎么样的（ie----> 与众不同）

window.onload=function(){
    var Test=document.getElementById('test1')
    Test.attachEvent("onclick",function(event){
        
        alert(1)
    },false);

    Test.attachEvent("onclick",function(event){
        alert(2)
    },false);
    
    Test.attachEvent("onclick",function(event){
        alert(3)
    },false)
}

他弹出来的效果是 3 2 1 对就是这个顺序

那么咱们不能写一个这个东西要写两个吧一个专门针对ie 啊于是大婶出现了

function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+
return r;
}
else {
elm['on' + evType] = fn;//DOM 0
}
}

写的有点乱自己还能看唉

浅析js绑定同一个事件依次触发问题系列（一）

相关推荐