- 使用 对象.事件 = 函数 的形式绑定响应函数时,只能为同一元素的同一事件绑定依次响应事件,如果绑定多次,则后面的函数会覆盖前面的函数。
- 所以我们可以使用 addEventListener() 和 attachEvent() 方法来为同一元素绑定多次事件。
-
addEventListener()
参数: 1、事件的字符串,不要on (click) 2、回调函数,当事件触发时该函数会被调用 3、是否在捕获阶段触发事件,需要一个布尔值,一般都传false 对象.addEventListener(事件,callback,false) 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数, 当事件被触发时,响应函数将会按照函数的绑定顺序执行。 该方法不支持IE8及以下的浏览器
-
attachEvent()
在IE8及以下浏览器中可以使用attachEvent()来绑定事件 参数: 1、事件的字符串,要on (onclick) 2、回调函数 对象.attachEvent(事件,callback) 这个方法也可以为同一对象的同一事件绑定多次, 不同的是它是后绑定先执行,执行顺序和addEventListener()相反
- 我们可以定义一个函数,用来为指定元素绑定响应函数,但是,addEventListener()中的this是绑定事件的对象;attachEvent()中的this是window,所以需要统一两个方法的this
参数:
obj 需要绑定事件的对象
eventStr 事件的字符串(不要on)
callback 回调函数
function bind(obj,eventStr,callback){
//大部分浏览器兼容方式
if(obj.addEventListener){
obj.addEventListener(eventStr ,callback ,false);
}else{
//IE8及以下浏览器
obj.attachEvent("on" + eventStr,function(){
//在匿名函数中调用回调函数,将this指向响应函数的调用者。
callback.call(obj);
});
}
}