JQuery——事件繫結bind和on的區別
引言
通過JQuery對目標物件繫結事件我們大部分都是通過$('選擇器').事件名()的形式實現，其實對事件的繫結還可以使用on和bind，為了搞明白兩者之間的區別特做記錄，以備以後查閱。
正文
bind和on都是給元素繫結事件用的,但兩者在使用時有些差別，我們最主要關注的就是on是存在事件冒泡的。
1、On與Bind的API對比
$(selector).on(event,childSelector,data,function)
| 引數 | 描述 |
|---|---|
| event | 必需。規定要從被選元素移除的一個或多個事件或名稱空間。由空格分隔多個事件值，也可以是陣列。必須是有效的事件。 |
| childSelector |
可選。規定只能新增到指定的子元素上的事件處理程式（且不是選擇器本身，比如已廢棄的 delegate() 方法）。 |
| data | 可選。規定傳遞到函式的額外資料。 |
| function | 可選。規定當事件發生時執行的函式。 |
$(selector).bind(event,data,function,map)
| 引數 | 描述 |
|---|---|
| event |
必需。規定新增到元素的一個或多個事件。由空格分隔多個事件值。必須是有效的事件。支援的事件有 click,dbclick,change,load,resize,scroll,unload,blur,focus,mousemove,mouseout, mouseup,mousedown,mousemove,mouseenter,mouseleave,select.submit, keydown,keypress,keyup,error...等事件 |
| data | 可選。規定傳遞到函式的額外資料。 |
| function | 必需。規定當事件發生時執行的函式。 |
| map | 規定事件對映 ({event:function, event:function, ...})，包含要新增到元素的一個或多個事件，以及當事件發生時執行的函式。 |
我們知道，javascript的事件冒泡特性，如果在父元素上註冊了一個事件處理函式，當子元素上發生這個事件的時候，父元素上的事件處理函式也會被觸發。這裡通過on進行事件繫結是就支援selector這個引數值，所以On進行繫結可以委託父元素進行事件響應。而bind不支援。bind只能給符合條件的元素本身新增事件，on可以將子元素的事件委託給父元素進行處理,而且可以給動態新增的元素加上繫結事件，即通過JS操作增加的子DOM元素也可以進行事件繫結。
JQuery通過on進行事件繫結是jquery1.7及其以上版本開始具有的功能，jquery1.7版本出現之後用於替代bind()，live()繫結事件方式。
關於on和bind支援的事件可以參考上表中bind中羅列的內容進行嘗試。
——(完)——