jquery 綁定事件
在1.7之前的版本中jQuery處理事件提供了四種事件監(jiān)聽方式馒稍，分別是bind、live长酗、delegate、on桐绒；
作用各不相同夺脾，后來統(tǒng)一的使用on/off方法之；
1茉继、bind(type,[data],function(eventObject))
bind是使用頻率較高的一種咧叭，作用就是在選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)，參數(shù)的含義如下：
type:事件類型馒疹，如click佳簸、change、mouseover等;
data:傳入監(jiān)聽函數(shù)的參數(shù)颖变，通過event.data取到生均。可選;
function:監(jiān)聽函數(shù)腥刹，可傳入event對象马胧，這里的event是jQuery封裝的event對象，與原生的event對象有區(qū)別衔峰，使用時需要注意佩脊。
我們來瞄一眼bind的源碼：
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
可以看到內(nèi)部是調(diào)用了on方法，這個on是什么樣的呢?稍后我們再看垫卤。先用我們上面的例子來試試：
$('#myol li').bind('click',getHtml);
bind的特點就是會把監(jiān)聽器綁定到目標(biāo)元素上威彰，有一個綁一個，在頁面上的元素不會動態(tài)添加的時候使用它沒什么問題穴肘。但如果列表中動態(tài)增加一個“列表元素5”歇盼，點擊它是沒有反應(yīng)的，必須再bind一次才行评抚。要想不這么麻煩豹缀，我們可以使用live。
jQuery還有一種事件綁定的簡寫方式如a.click(function(){});慨代、a.change(function(){});等邢笙，它們的作用與bind一樣，僅僅是簡寫而已侍匙。
2氮惯、live(type, [data], fn)
live的參數(shù)和bind一樣，它又有什么蹊蹺呢，我們還是先瞄一眼源碼：
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
可以看到live方法并沒有將監(jiān)聽器綁定到自己(this)身上筐骇，而是綁定到了this.context上了债鸡。這個context是什么東西呢?其實就是元素的限定范圍江滨，看了下面的代碼就清楚了：
$('#myol li').context; //document
$('#myol li','#myol').context; //document
$('#myol li',$('#myol')[0]); //ol
通常情況下铛纬，我們都不會像第三種方式那樣使用選擇器，所以也就認為這個context通常就是document了唬滑，即live方法把監(jiān)聽器綁定到了document上了告唆。不把監(jiān)聽器直接綁定在元素上，你是不是想起事件委托機制來了呢?若沒有晶密，可以點擊這里回憶一下擒悬。live正是利用了事件委托機制來完成事件的監(jiān)聽處理，把節(jié)點的處理委托給了document稻艰。在監(jiān)聽函數(shù)中懂牧，我們可以用event.currentTarget來獲取到當(dāng)前捕捉到事件的節(jié)點。下面的例子來揭曉：
$('#myol li').live('click',getHtml);
使用事件委托的優(yōu)點一目了然尊勿，新添加的元素不必再綁定一次監(jiān)聽器僧凤。看來live這貨還真不錯元扔，以后拋棄bind就用它了!可以嗎?答案是否定的躯保，而且是大大的否定。因為將監(jiān)聽器綁定到了document上澎语，所以事件的處理得等待層層冒泡途事，直到冒泡到根節(jié)點才開始處理，在DOM樹較深或者節(jié)點的嵌套關(guān)系很復(fù)雜時擅羞，會有意想不到的結(jié)果尸变，根節(jié)點的負擔(dān)太重了。就像四世同堂减俏、五世同堂召烂，甚至八世同堂(現(xiàn)實中不太可能，但在HTML中層級關(guān)系可能遠比這還多)垄懂，老爺子肯定記不清哪個孫子是哪個兒子的骑晶，哪個重孫又是哪個兒子的兒子的，老爺子腦子一亂草慧，糊涂了桶蛔，事情就辦錯了。為此漫谷，jQuery官方已宣布在1.7版本開始廢棄live仔雷，改用其他方式代替。所以我們也順應(yīng)號召，罷用此方法碟婆。
正因為live存在那樣的缺點电抚，所以我們就思考，既然老爺子負擔(dān)那么重竖共，可不可以別把監(jiān)聽器綁定在document上呢蝙叛，綁定在就近的父級元素上不就好了。順應(yīng)正常邏輯公给，delegate誕生了借帘。
3、delegate(selector,type,[data],fn)
參數(shù)多了一個selector淌铐，用來指定觸發(fā)事件的目標(biāo)元素肺然，監(jiān)聽器將被綁定在調(diào)用此方法的元素上⊥茸迹看看源碼：
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
又是調(diào)用了on际起，并且把selector傳給了on⊥麓校看來這個on真的是舉足輕重的東西街望。照樣先不管它〈角耍看看示例先：
$('#myol').delegate('li','click',getHtml);
我們在例子中將監(jiān)聽器綁定到ol上它匕，event.currentTarget顯示當(dāng)前捕獲到事件的元素是ol。這下窖认，我們的選擇又多了一些靈活性豫柬，不單可以利用事件委托，還可以選擇委托的對象扑浸。畢竟老麻煩同一個人幫忙很不好嘛烧给。對于如何選擇委托對象，還是需要一定的策略的喝噪，畢竟父級元素可以有很多础嫡。我覺得原則應(yīng)該是選擇最近的“穩(wěn)定”元素，選擇最近是因為事件可以更快的冒泡上去酝惧，能夠在第一時間進行處理榴鼎。所謂“穩(wěn)定”是指該父級元素是一開始就在頁面上的，不是動態(tài)添加上來的晚唇，而且將來也不會消失掉巫财，這樣可以保證它可以時時監(jiān)控著自己的孩子。
4哩陕、.on( events [,selector ] [,data ], handler(eventObject) )
events：一個或多個空格分隔的事件類型和可選的命名空間平项，或僅僅是命名空間赫舒，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
selector：一個選擇器字符串，用于過濾出被選中的元素中能觸發(fā)事件的后代元素闽瓢。如果選擇器是 null 或者忽略了該選擇器接癌，那么被選中的元素總是能觸發(fā)事件
data：當(dāng)一個事件被觸發(fā)時，要傳遞給事件處理函數(shù)的event.data
handler(eventObject)：事件被觸發(fā)時扣讼，執(zhí)行的函數(shù)缺猛。若該函數(shù)只是要執(zhí)行return false的話，那么該參數(shù)位置可以直接簡寫成 false
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<input id="ipt" type="text"> <button id="btn">添加</button>
<div id="wrap">
</div>
</body>
</html>
js
$('.box li').click(function(){
console.log(2)
var str = $(this).text()
$('#wrap').text(str)
})
等同于
$('.box li').on('click', function(){
console.log(1)
var str = $(this).text()
$('#wrap').text(str)
})
命名空間沒什么特別的作用届谈，只不過在解綁事件時便于區(qū)分綁定的事件
$('.box li').on('click.hello', function(){
console.log(3)
var str = $(this).text()
$('#wrap').text(str)
})
$('.box li').off('click.hello')
事件代理
$('.box li').on('click', function(){
console.log(1)
var str = $(this).text()
$('#wrap').text(str)
})
//可是用如下方法新增的元素是沒綁定事件的
$('#btn').on('click', function(){
var value = $('#ipt').val()
$('.box>ul').append('<li>'+value+'</li>')
})
//我們可以用事件代理
$('.box ul').on('click', 'li', function(){
var str = $(this).text()
$('#wrap').text(str)
})
//上面代碼相當(dāng)于原生 js 的
document.querySelector('.box ul').addEventListener('click', function(e){
if(e.target.tagName.toLowerCase() === 'li'){
//do something
}
})
綁定事件的時候我們也可以給事件附帶些數(shù)據(jù)枯夜，只不過這種用法很少見
$('.box').on('click', {name: 'hunger'}, function(e){
console.log(e.data)
})
一些常見事件的快捷方式
作者：彭榮輝
鏈接：http://www.reibang.com/u/0f804364a8a8
來源：簡書
著作權(quán)歸作者所有弯汰。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)艰山，非商業(yè)轉(zhuǎn)載請注明出處。