实现事件的绑定,一般情况下都是使用onclick等方式实现,但是使用
使用对象.事件 = 函数的形式绑定响应函数,
* 它只能同时为一个元素的一个事件绑定一个函数,
* 不能绑定多个,如果绑定了多个,则后边会覆盖前边的。
* 如果实现绑定多个,则可以用addEventListener()实现或者attachEvent(IE8版本以下)则可以用addEventListener()
* 通过这个方法可以为元素绑定响应函数
* - 参数
* 1、事件的字符串 ,不要on
* 2、回调函数,当事件触发时,该函数会被调用
* 3、是否在捕获阶段触发事件,需要一个布尔值,一般都传fasle
*
* 使用addEventListener可以为一个元素的相同事件同时绑定多个响应函数,
* 这样子被触发时,响应函数将会按照函数的绑定顺序执行。
* 这个方法不支持IE8以下浏览器
btn01.addEventListener('click',function(){
alert(1)
},false)
btn01.addEventListener('click',function(){
alert(2)
},false)
*
* 在IE8中可以使用attachEvent来绑定事件
* 参数:
* - 事件的字符串,要on
* - 回调函数
* - 这个方法也可以同时为一个事件绑定多个响应函数,
* 不同的是后绑定先执行,执行顺序和addEventListener顺序相反。
*
btn01.attachEvent("onclick",function(){
alert(1)
});
*
* 但是addEventListener兼容普通浏览器(不兼容IE8以下),而attachEvent兼容IE8(不兼容普通浏览器),
* 所以为了解决兼容性问题:
* 定义一个函数,用来指定元素绑定响应函数。
* addEventListener中的this,是绑定事件的对象
* attachEvent中的this中的this,是window
* 需要统一两个方法的this
*
* 参数:
* obj 要绑定事件的对象
* eventstr 事件的字符串
* callback 回调函数
*
*/
为了兼容以上所有的浏览器的话,则需要自己写一个绑定函数去解决这个问题。
以下是实现方式:
bind(btn01,'click',function(){
alert(this)
});
function bind(obj,evenstr,callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(evenstr,callback,false)
}else{
//IE8及以下
//统一this的话,需要统一成button调用
/*attachEvent是window调用的
* this由谁调用方式决定
* callback.call(obj)
*/
obj.attachEvent("on"+evenstr,function(){
//在匿名函数中调用回调函数,就可以改变this对象了
callback.call(obj)
})
}