JS事件之繫結事件
JS中的事件是js中很重要的一部分內容，充分理解事件機制是必不可少的。
JS中事件分類：
滑鼠事件：onclick, ondbclick, onmouseover,onmousedown, onmouseup,onmousemove,onmouseout等
鍵盤事件：onkeyup，onkeydown,onkeypress...
表單事件：onsubmit，onblur，onfoucs，onchange..
頁面事件：onload，onunload，onreload...
既然有這麼多的事件，那麼怎麼給元素繫結事件那？？看一下給元素繫結事件應該有幾種方法！
第一種方法 ：HTML元素行間事件（也可以叫HTMl事件處理程式）,直接在html標籤裡新增事件。
缺點：html和js程式碼緊密耦合
<input type="button" onclick="test();"/>
<script>
function test() {
alert("我是行間事件");
}
</script>第二種 新增事件的方法，用的比較多的一種方式：把一個函式賦值給一個事件處理程式屬性。（這種方式也叫做Dom0級事件處理程式）
簡單而且有跨瀏覽器的優勢
<body> <input id="button1"type="button" value="按鈕"/> <script> oBtn = document.getElementById('button1');// 獲取的按鈕元素 //定義函式abc function abc(){ alert('abc'); } oBtn.onclick=function abc(){alert('abc');} //oBtn.onclick=abc;//當點選的時候執行abc這個函式，等價於 oBtn.onclick=function abc(){alert('abc');} </script> </body>
如何要去掉繫結的事件：直接讓btn2.onclick = null；即可
上面的這種方式在web開發中是比較常用的方式，onclick，onmousemove等這些事件在網頁中都可以很到的支援，但是在手機上就失效了，在手機上需要通過“事件監聽”的方式來實現事件繫結，接下來看看第三種方式
第三種方法：通過“事件監聽”的方式來繫結事件（也叫Dom2級事件處理程式）
<input id="inputBtn" type="button" value="click"/> <script> var inputBtn = document.getElementById('inputBtn'); inputBtn.addEventListener('click',showMsg,false);//滑鼠單擊的時候呼叫showMes這個函式 function showMsg() { alert("事件監聽"); } </script>
注意：這裡<script>要放在input下面
addEventListener('click',showMsg,false); 有三個引數
第一個代表觸發什麼事件，注意這裡的寫法沒有on
第二個引數代表事件發生時呼叫的事件處理函式
第三個引數是布林值：true或者false
第三個引數是true：表示允許在捕獲階段響應事件
第三個引數是false：表示不允許在捕獲階段響應事件
(如果看不懂第三個引數說的意思),可以參考我的另一篇部落格《JS事件之事件流機制》
上面寫的通過addEventListener“事件監聽的”方式繫結事件在IE下有問題，因為IE下支援addEventListener這個方法，IE的方法是attachEvent(“onclick”,showMsg);IE的attachEvent只有兩個引數
第一個代表觸發什麼事件，注意這裡的寫法有on
第二個引數代表事件發生時呼叫的事件處理函式
以上所述就是第三者繫結事件的方式，這種方式在pc上也都是支援的，只不過不同瀏覽器支援的方式有略微不同，所以在PC端用事件監聽方式繫結事件的時候需要處理一下瀏覽器相容的問題
<script>
var inputBtn = document.getElementById('inputBtn');
if(typeof window.addEventListener != "undefined"){
// 表示不是IE，支援addEventListener方法
inputBtn.addEventListener('click',showMsg,false);
}else{
inputBtn.attachEvent("onclick",showMsg);
}
function showMsg() {
alert("事件監聽");
}
</script>第三種方式繫結的事件怎麼去除那？
inputBtn.removeEventListener('click',showMsg,false); 就ok了