我看了一个教程,上面写了一个用自定义的传统事件绑定函数来代替IE8及以上的老IE的attachEvent方法,主讲老师写了一点看不懂,哪位能解释一下,代码如下:
HTML代码:
<body>
<input type="button" value="按钮" id="button" />
</body>
JS代码:
addEvent(obj, type, fn){
//先创建一个保存事件的容器obj.events对象
if(!obj.events) obj.events = {};
//再创建一个保存事件处理函数的容器obj.events[type]数组
if(!obj.events[type]){
var obj.events[type] = [];
if(obj['on'+type]) obj.events[type][0] = fn; //这里就不同了,先写出主讲老师的方法
}
//第二次执行时保存
obj.events[type][addEvent.ID++] = fn;
//开始执行
obj['on'+type] = function(){
for(var i in obj.events[type]){
obj.events[type][i]();
}
}
}
//事件计数器
addEvent.ID = 1;
//开始执行
addEvent(window, 'load', function(){
var button = document.getElementById('button');
addEvent(button, 'click', fn1);
addEvent(button, 'click', fn2);
addEvent(button, 'click', fn3);
});
function fn1(){
alert(1);
}
function fn2(){
alert(2);
}
function fn3(){
alert(3);
}
主讲老师在用obj.events[type][0]保存fn时,前面加了一个判断,即if(obj['on'+type]),这个判断的结果是点击了按钮后,分别弹出1、2、3,而不加这个判断,则为1、1、2、3四次。
我自己没有用这个办法,而是加了一个else分支,也能实现弹出1、2、3三次
if(!obj.events[type]){
var obj.events[type] = [];
obj.events[type][0] = fn;
} else {
obj.events[type][addEvent.ID++] = fn;
}
我想问的是,主讲老师讲的办法即加了一个if(obj['on'+type])的判断是如何起作用的?为何加了之后也能将原来多出来的一次1弹窗去掉呢?