浅析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
}
}

写的有点乱   自己还能看  唉