前端开发制作网页时,通常利用js进行各种网页交互,而交互必须涉及到事件绑定,下面来介绍一下事件绑定的各种方法
1.首先我们要了解一下事件三要素:即 事件源(要触发的对象),事件(怎么触发此事件),事件处理函数(发生了什么)
2.事件绑定的几种方法(以onclick事件为例):
object.onclick=function(){
//do something
}
这种方法在一个元素中只能绑定一次事件,如果给一个元素绑定多个事件,后面的会覆盖前面的
elem.addEventListener('click',function(){
//do something
},false).
addEventListener是w3c标准写法,共有三个参数,第一个为事件类型,但是不加on,第二个参数是一个函数,用于写逻辑代码进行事件操作,第三个参数为boolean型值,true或false,true表示事件捕获,false表示事件冒泡,默认为false
清除事件绑定时用removeEventListener();注意:清除事件和绑定事件一定要为同一个
elem.attachEvent('onclick',function(){
//do something
})
早期IE事件绑定方法,只有两个参数,因为早期IE不支持事件冒泡,第一个参数为事件类型 **需加on**,第二个参数为事件处理函数,清除事件时用detachEvent()
**需要注意的是:attachEvent函数中 this指向window,可以用call,apply,bind 进行修改this指向 且它的事件相对于addEventListener 执行顺序是相反的**
简单函数用于解决兼容性问题:
function addEvent(obj,type,handle){
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle,false);
}catch(e){
try{ // IE8.0及其以下版本
obj.attachEvent('on' + type,function(){
handle.call(obj);
});
}catch(e){ // 早期浏览器
obj['on' + type] = handle;
}
}
}