綁定事件與解綁事件是常用到的寫法，這里總結(jié)了幾種常見的綁定事件與解綁事件的方法。
綁定click事件
一：直接在html標簽里添加事件-----HTML元素行間事件(這種寫法是JavaScript原生事件)
<input id="btn" type="button" value="點我" onclick="test();" />
function test() {
alert("行間事件");
}
缺點：html與js緊密耦合
二：使用jq的click方法綁定
$("#btn").click(function(){
alert("jquery使用click綁定事件");
})
三：使用jq的bind方法綁定
$("#btn").bind("click",function(){
alert("jquery使用bind綁定事件");
})
四：使用jq的on方法綁定
$("#btn").on("click",function(){
alert("jquery使用on綁定事件");
})
五：使用jq的可綁定動態(tài)元素的on方法綁定
$("body").on("click","#btn", function () {
alert("jquery使用on可綁定動態(tài)元素事件");
})
點擊按鈕，這五個事件都會執(zhí)行，執(zhí)行順序：1>2=3=4>5
其中行間事件onclick這種寫法的事件最先觸發(fā)，其次是監(jiān)聽事件click方法綁定，這種寫法和寫法三的on方法、方法四的bind方法是相同的，他們?nèi)唛g的順序取決于代碼的順序，誰在前那么誰就先綁定，方法五也是使用了on方法，但是這種寫法可以給動態(tài)元素綁定事件，比如我們通過發(fā)送服務(wù)器請求動態(tài)加載到頁面的元素，加載后的元素默認是沒有綁定事件的，但是使用方法五可以成功為這種動態(tài)元素綁定事件，這種寫法其實是發(fā)生的事件委托，監(jiān)聽父元素body，然后代替子元素執(zhí)行click事件,所以是執(zhí)行順序在前面四種后
移除click事件
寫法一的移除：
<input id="btn" type="button" value="點我" onclick="test();" />
function test() {
alert("行間事件");
}
這種寫法其實可以理解為：
<input id="btn" type="button" value="點我" />
/*點擊的時候執(zhí)行函數(shù)*/
document.getElementById("btn").onclick = test;
/*定義函數(shù)*/
function test() {
alert("行間事件");
}
那么移除事件就很簡單了,一句代碼搞定：
document.getElementById("btn").onclick = null;
或者使用jq的方法移除：
$("#btn").prop("onclick",null);
若使用多種寫法綁定多個click事件則移除所有的click事件：
$("#btn").prop("onclick",null).off("click");
寫法二、三、四的移除：
$("#btn").on("click",function(){
alert("jquery使用on綁定事件");
})
$("#btn").click(function(){
alert("jquery使用click綁定事件");
})
$("#btn").bind("click",function(){
alert("jquery使用bind綁定事件");
})
直接使用unbind方法
$("#btn").unbind("click");
或者使用off方法：
$("#btn").off("click");
寫法五使用on綁定動態(tài)元素的移除：
這種寫法使用unbind無效，因為它綁定的對象是父元素body，那么需要用配對的函數(shù)off移除
$("body").off("click","#btn");
需要注意的是：事件委托寫法的解綁的元素需要與事件綁定的目標元素一致（即案例中body,#btn需要一一對應(yīng)），否則不生效。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品；off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。使用起來更方便，推薦使用。
其中關(guān)于off函數(shù)的參數(shù)說明如下：
/*如果不傳參，會移除所有的事件*/
$("#btn").off();
/*如果傳遞一個參數(shù)，會移除這個類型的所有事件*/
$("#btn").off('click');
/*如果傳遞兩個參數(shù)，則移除這兩個參數(shù)指定的事件*/
$("#btn").off('click',test);
原文作者技術(shù)博客：http://www.itdecent.cn/u/ac4daaeecdfe
95后前端妹子一枚，愛閱讀，愛交友，將工作中遇到的問題記錄在這里，希望給每一個看到的你能帶來一點幫助。
歡迎留言交流。
