一、事件绑定方法
1、element.on*** = function(event){} this 指向自身
兼容性好,基本等于写在HTML的行间上,所以叫做句柄的绑定方式
2、obj.addEventListener(type,fn,false) IE9以下不兼容 也就是w3c标准 this 指向自身
type:事件类型
fn:处理函数
false
可以给一个对象的一个事件绑定多个处理函数,例如:
html代码:
<div></div>
js代码:
var div = document.getElementsByTagName("div");
div.addEventListener('click',function(){
console.log("a");
},false)
div.addEventListener('click',function(){
console.log("b");
},false)
会打印 a 和 b,执行两个函数,这两个函数的样子一样,但是地址不一样
但是:
<div></div>
var div = document.getElementByTagName("div");
div.addEventListener('click',test,false);
div.addEventListener('click',test,false);
function test(){
console.log("a");
}
只会打印一个a,不能给一个函数绑定多次。
3、obj.attachEvent('on' + type,fn) IE独有 与obj.addEventListener(type,fn,false)差不多 this 指向window
区别:可以给一个对象的一个事件绑定多个处理函数,而且同一个绑定函数多次依旧能执行多次
this 指向window 解释:
var div = document.getElementByTagName("div");
div.attachEvent('onclick',function () {
console.log(this);//--->window
})
解决 this 指向自身
var div = document.getElementByTagName("div");
div.attachEvent('onclick',function () {
test.call (div) ;
})
function () {
console.log(this);//---->div
}
4、封装一个兼容性的 addEvent(element,type,handle);方法
给一个dom对象添加该事件类型的处理函数
js代码:
function addEvent(element,type,handle) {
if(element.addEventListener){
element.addEventListener(type,handle,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,function () {
handle.call(element);
})
}else {
element['on'+type] = handle;
}
}