jquery 如何綁定事件
事件處理中最頭疼的就是瀏覽器兼容問題嫡良，jQuery封裝了很好的API，可以方便的進行事件處理
- 簡單介紹
live bing dagelate - 對應(yīng)的解除監(jiān)聽的函數(shù)分別是
unbind锭吨、die、undelegate
-
bing
一：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 );
}
$('#myol li').bind('click',getHtml);
bind的特點就是會把監(jiān)聽器綁定到目標元素上巍沙，有一個綁一個葵姥，在頁面上的元素不會動態(tài)添加的時候使用它沒什么問題。但如果列表中動態(tài)增加一個“列表元素5”句携，點擊它是沒有反應(yīng)的榔幸，必須再bind一次才行。要想不這么麻煩矮嫉，我們可以使用live削咆。
jQuery還有一種事件綁定的簡寫方式如a.click(function(){});、a.change(function(){});等蠢笋，它們的作用與bind一樣拨齐，僅僅是簡寫而已。
二：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來獲取到當前捕捉到事件的 節(jié)點。下面的例子來揭曉：
$('#myol li').live('click',getHtml);
三: dagelate
live存在那樣的缺點玫霎，所以我們就思考凿滤，既然老爺子負擔那么重，可不可以別把監(jiān)聽器綁定在document上呢庶近，綁定在就近的父級元素上不就好了翁脆。順應(yīng)正常邏輯，delegate誕生了鼻种。
參數(shù)多了一個selector反番，用來指定觸發(fā)事件的目標元素，監(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);
在1.7之前的版本中jQuery處理事件有多個方法雁芙， (google 搜索: jquery live bind degelate)作用各不相同轧膘，后來統(tǒng)一的使用on/off方法
on/off
.on( events [,selector ] [,data ], handler(eventObject) )
看起來參數(shù)及其復(fù)雜，我們看一下各個參數(shù)的意思
events：一個或多個空格分隔的事件類型和可選的命名空間兔甘，或僅僅是命名空間谎碍，比如"click", "keydown.myPlugin", 或者 ".myPlugin"selector：一個選擇器字符串，用于過濾出被選中的元素中能觸發(fā)事件的后代元素洞焙。如果選擇器是 null 或者忽略了該選擇器蟆淀，那么被選中的元素總是能觸發(fā)事件data：當一個事件被觸發(fā)時拯啦，要傳遞給事件處理函數(shù)的event.datahandler(eventObject)：事件被觸發(fā)時，執(zhí)行的函數(shù)熔任。若該函數(shù)只是要執(zhí)行return false的話褒链，那么該參數(shù)位置可以直接簡寫成 false
簡單示例：
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> //不要忘記引入
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>點擊彈框</p>
<script>
$('p').on('click',function(){
console.log($(this).text())
})
</script>
</body>
-
.one
.one( events [, selector ] [, data ], handler(eventObject) )
同on，綁定事件疑苔，但只執(zhí)行一次
$('p').one('click',function(){
console.log($(this).text())
})
-
.off
.off( events [, selector ] [, handler ] )
移除一個事件處理函數(shù)
$('p').on('click',function(){
console.log($(this).text())
}) // 添加點擊事件
$('p').off('click') // 移除點擊事件
直接綁定和使用事件代理分別如何使用
- 直接綁定
示例：
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type="text">
<button>添加</button>
<script>
$('ul li').on('click',function(){
console.log($(this).text())
})
$('button').on('click',function(){
var str = $('input').val() //獲取input的值
var li1 = $('<li>'+ str + '</li>'); //新建li 接收 input的值
li1.appendTo('ul') //將li添加到隊列中去
})
</script>
效果：
可以清楚的看到我們直接給li添加事件甫匹，會導(dǎo)致后來新增的DOMli點擊沒有效果，這個和javaScript的點擊事件和事件代理是一樣的惦费。我們可以使用事件代理來處理這個點擊事件
代碼
$('ul').on('click','li',function(){ // 選中ul 下的 li
console.log($(this).text())
})
$('button').on('click',function(){
var str = $('input').val() //獲取input的值
var li1 = $('<li>'+ str + '</li>'); //新建li 接收 input的值
li1.appendTo('ul') //將li添加到隊列中去
})
效果：
給ul綁定事件兵迅，選中ul下的li 可以查看上面的綁定事件的on方法 下的
.on( events [,selector ] [,data ], handler(eventObject) )
selector：一個選擇器字符串，用于過濾出被選中的元素中能觸發(fā)事件的后代元素薪贫。如果選擇器是 null 或者忽略了該選擇器恍箭，那么被選中的元素總是能觸發(fā)事件
