绑定事件
使用 对象.事件 = 函数 的形式绑定响应函数,只能同时为一个元素的一个事件绑定一个响应函数,不能绑定多个,如果绑定多个,后边会覆盖掉前边的
btn.onclick = function(){
console.log(this)
}
btn.onmouseover = function(){
console.log("123")
}
addEventListener()
通过这个方法也可以为元素绑定响应函数
参数:
1.事件的字符串,不要on
2.回调函数,当事件触发时该函数会被调用
3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,这样当事件被触发时,响应函数将会按照函数的绑定顺序执行 这个 方法不支持IE8及以下的浏览器
btn.addEventListener("click",function(){
console.log(this)
alert(1)
},false)
btn.addEventListener("click",function(){
alert(2)
},false)
btn.addEventListener("click",function(){
alert(3)
},false)
attachEvent()
在IE8中可以使用attachEvent()来绑定事件
参数:
1.事件的字符串,要on
2.回调函数
这个方法也可以同时为一个事件绑定多个处理函数,不同的是它是后绑定先执行,执行顺序和addEventListener()相反
ie8 attachEvent()
btn.attachEvent("onclick",function(){
alert("abc")
})
定义一个函数,用来为指定元素绑定响应函数addEventListener()中的this,是绑定事件的对象
attachEvent()中的this,是window需要统一两个方法this
参数:
el 要绑定事件的对象
event 事件的字符串(不要on)
callback 回调函数
bind(btn,"click",function(){
console.log(this)
})
function bind(el,event,callback){
if(el.addEventListener){
el.addEventListener(event,callback,false)
}else{
el.attachEvent("on"+event,function(){
callback.call(el)
})
}