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

写的有点乱 自己还能看 唉