原生JS的事件绑定

原生js的事件绑定有两种方法：

1.通过HTML属性处理函数的绑定

example:

1)<button id='oBtn' οnclick="alert('hahaha')">click</button>

2)<button οnclick="la()">click</button>

<script>
function la(){alert('xixi');}
</script>

这种方法适合编写简短的小事件，不会涉及到太大的性能问题。

2通过JavaScript对象属性来绑定

var btn = document.getElementById('oBtn');

btn.onclick = function(){

alert('xixi');}

但是这种方法的缺陷就是只能对一个元素的一个事件进行绑定，会出现覆盖的效果，只会执行最后面定义的。

3利用所有文档元素的方法

这种方法有兼容性问题

（1）addEventListener(type,handler,boolean),兼容IE8以后的所有浏览器

（2）attachEvent(type,handler),适用IE8以下的版本

用法：oDiv1.addEventListener('click',function(){
alert('div11');
}，false);

事件的执行顺序与事件的注册顺序是一致的，false:发生在冒泡阶段 , true则发生在捕获阶段

    oDiv1.attachEvent('onclick',function(){
alert('haha');
});

注销的方法分别是removeEvent()  and detach()

可以自己封装一个函数来做兼容：

//add~event

funciton addEvent(elem,type,fn){

if(elem.addEventListener)//judge 

{

    elem.addEventListener(type,fn,false);//默认是冒泡

 }

else if(elem.attachEvent){

    elem[type+fn] = function(){

    fn.call(elem);

    };

   elem.attachEvent('on'+type,elem[type+fn]);

}

else{

elem['on'+type] = fn;

}

//remove~ event

function removeEvent(elem,type,fn){
if(elem.removeEventListener){
elem.removeEventListener(type,fn,false);
}else if{
elem.detachEvent('on'+type,elem[type+fn]);
}else{
elem['on'+type] = fn;
}
}

//call function

addEvent(oBtn,'click',function(){
alert(this.innerHTML);
});

removeEvent(oBtn,'click',,function(){
alert(this.innerHTML);
});