绑定事件算是DOM操作里面最基本的事情了,通常绑定事件的方式有以下一种:
1.形如内联样式的时间绑定:
<input type="submit" οnclick="....."/>
2.使用addEventlisener(event,fn,useCapture)
也许大家经常使用这个方法,但没有发现这个方法其实有三个参数,最后一个参数代表是否使用事件捕获,true为使用事件捕获,false则为使用事件冒泡,默认使用事件冒泡。
事件捕获是相对于事件冒泡的一种机制,事件冒泡是事件会随着子元素向上传播,而事件捕获则是事件沿着父元素向子元素传播,这也就衍生除了事件委托这一机制,若是大家不明白,可移步我的这篇文章,对事件冒泡与事件捕获有详细的研究与说明:事件冒泡与事件捕获详解
3.使用elementObject.onXXX
总结以上几点,我们就可以写出添加事件的兼容式写法 :
function addEvent(elem,event,fn) {
if(elem.addEventListener){
elem.addEventListener(event,fn,false);
}else if (elem.attachEvent){
elem.attachEvent('on'+event,fn);
}else{
elem['on'+event]=fn;
}
}