事件绑定的多种形态解决多种形态的浏览器兼容性问题(以及attachEvent中this指向的改变)
第一个种形态:
事件绑定的基本语法 与概念 :使用 对象.事件=函数 的形式绑定响应函数,它只能同时为一个元素的一个事件绑定一个响应函数,不能绑定多个,如果绑定
多个,则后边面的会覆盖掉前面的那个
代码示范区:
//为btn01绑定一个单击响应函数
/*btn01.onclick = function(){
alert(1);
};*/
//为btn01绑定第二个响应函数
/*btn01.onclick = function(){
alert(2);
};*/
第二种形态:addEventListener()
通过这个方法也可以为元素绑定响应函数
参数:
1.事件的字符串,不要on
2.回调函数,当事件触发时该函数会被调用
3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
这样当事件被触发时,响应函数将会按照函数的绑定顺序执行,,,,,但是IE8及以下的浏览器不支持这个方法
addEventListener()方法的的语法与执行代码示范区:
btn.addEventListener('click',function(){
alert(1);
},false);
btn.addEventListener('click',function(){
alert(2);
},false);
btn.addEventListener('click',function(){
alert(3);
},false);
在IE8及以下浏览器没有addEventListener()这个方法所有要使用attachEvent()这个方法
attachEvent这个方法的基本介绍:
参数:
1.事件的字符串,要on
2.回调函数
这个方法也可以同时为一个事件绑定多个处理函数,不同的是它后绑定先执行,执行顺序和addEventListener()相反
基本代码的微略示范:
btn01.attachEvent("onclick",function(){
alert(1);
});
btn01.attachEvent("onclick",function(){
alert(2);
});
btn01.attachEvent("onclick",function(){
alert(3);
});
现在在考虑addEventListener和attachEvent中的回调函数这的this区别:
/*btn01.addEventListener("click",function(){
alert(this);
},false);*/
/*btn01.attachEvent("onclick",function(){
alert(this); });*...////this指向window
解释this的指向
addEventListener()----this--->指向是绑定事件的对象
attachEvent()-----this------>指向window
解决了下关于这个两个方法的兼容性问题:(下面代码仅供参考:):
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr , callback , false);
}else{
/*
* this是谁由调用方式决定
* callback.call(obj)
*/
//IE8及以下
obj.attachEvent("on"+eventStr , function(){
//在匿名函数中调用回调函数
callback.call(obj);//这个把attachEvent本来的this指向window改为callback.call(obj);call中传入的对象
});
}
}