事件绑定及深入-中
//W3C自带的两个添加事件和删除事件
1.覆盖问题，解决
window.addEventListener('load',function(){
alert('Lee');
},false)
window.addEventListener('load',function(){
alert('Mr.Lee');
},false)
window.addEventListener('load',function(){
alert('Mriss.Lee');
},false)
2.相同函数屏蔽的问题，解决
window.addEventListener('load',init,false);
window.addEventListener('load',init,false);
window.addEventListener('load',init,false);
function init(){
alert('Lee');
}
3.是否可以传递this，解决
window.addEventListener('load',function(){
var box=document.getElementById('box');
box.addEventListener('click',toBlue,false);
},false);
function toRed(){
this.className='red';
this.removeEventListener('click',toRed,false);
this.addEventListener('click',toBlue,false);
}
function toBlue(){
this.className='blue';
this.removeEventListener('click',toBlue,false);
this.addEventListener('click',toRed,false);
}
4.添加一个额外的方法，会不会被覆盖，或者只能执行一次，解决
window.addEventListener('load',function(){
var box=document.getElementById('box');
box.addEventListener('click',function(){
alert('Lee');
},false);
box.addEventListener('click',toBlue,false);
},false);
function toRed(){
this.className='red';
this.removeEventListener('click',toRed,false);
this.addEventListener('click',toBlue,false);
}
function toBlue(){
this.className='blue';
this.removeEventListener('click',toBlue,false);
this.addEventListener('click',toRed,false);
}
//综上所属，W3C是比较完美的解决了这些问题，非常好用
但是IE8和之前的浏览器并不支持，而是采用了自己的事件，当然，ie9已经完全支持了
//冒泡和捕获
W3C是可以设置冒泡和捕获方式 false是冒泡，true是捕获
window.addEventListener('load',function(){
var box=document.getElementById('box');
box.addEventListener('click',function(){
alert('Lee');
},true); //捕获
box.addEventListener('click',toBlue,false);
},true);
------------------------------------------------------------------------------
//IE的事件绑定机制
IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的参数，事件名称和函数。
在使用这两组函数的时候，先把区别说一下：1.IE不支持捕获，只支持冒泡；2.IE添加事件不能屏蔽重复的函数；3.IE中
的this指向的是window而不是DOM对象。4.在传统事件上，IE是无法接受到event对象的，但使用了attachEvent()却可以，
但有些区别。
//1.覆盖问题，解决了，但有不同，顺序不同，是倒过来的
window.attachEvent('onload',function(){
alert('Lee');
})
window.attachEvent('onload',function(){
alert('Mr.Lee');
})
window.attachEvent('onload',function(){
alert('Miss.Lee');
})
2.相同函数屏蔽的问题 未解决
window.attachEvent('onload',init);
window.attachEvent('onload',init);
function init(){
alert('Lee');
}
3.是否可以传递this 不能
window.attachEvent('onload',function(){
var box=document.getElementById('box');
box.attachEvent('onclick',function(){
//alert(this===box);
alert(this===window); true
});
})
4.添加一个额外的方法，会不会被覆盖，或者只能执行一次 解决
window.attachEvent('onload',function(){
var box=document.getElementById('box');
box.attachEvent('onclick',function(){
alert('Lee');
});
box.attachEvent('onclick',function(){
alert('Mr.Lee');
});
})
//IE的事件切换器
window.attachEvent('onload',function(){
var box=document.getElementById('box');
box.attachEvent('onclick',toBlue);
})
function toRed(){
var that=window.event.srcElement;
that.className='red';
that.detachEvent('onclick',toRed);
that.attachEvent('onclick',toBlue);
}
function toBlue(){
var that=window.event.srcElement;
that.className='blue';
that.detachEvent('onclick',toBlue);
that.attachEvent('onclick',toRed);
}
//event对象的获取
window.attachEvent('onload',function(){
var box=document.getElementById('box');
box.onclick=function(evt){ //传统方法IE无法通过参数获取evt
alert(evt);
}
box.attachEvent('onclick',function(ev){ //IE的现代事件绑定机制是可以的
alert(evt);
alert(evt.type);
alert(evt.srcElement.tagName);
alert(window.event.srcElement.tagName);
});
})
-------------------------------------------------------------------------------------
//跨浏览器添加事件
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
}
}
//跨浏览器移除事件
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){
obj.detachEvent('on'+type,fn);
}
}
//跨浏览器获取目标对象
function getTarget(evt){
if(evt.target){ //W3C
return evt.target;
}else if(window.event.srcElement){ //IE
return window.event.srcElement;
}
}
addEvent(window,'load',function(){
var box=document.getElementById('box');
addEvent(box,'click',toBlue);
})
function toRed(evt){
var that=getTarget(evt);
that.className='red';
removeEvent(that,'click',toRed);
addEvent(that,'click',toBlue);
}
function toBlue(evt){
var that=getTarget(evt);
that.className='blue';
removeEvent(that,'click',toBlue);
addEvent(that,'click',toRed);
}
实际项目中这个方法可能不会用
