原生js的事件繫結有兩種方法：

1.通過HTML屬性處理函式的繫結

example:

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

2)<button onclick="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);

事件的執行順序與事件的註冊順序是一致的，

    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);
});