js 綁定無響應父元素監聽，綁定子元素，事件綁定的幾種方法以及區別

時間 2019-11-10

原文原文鏈接

事件綁定的幾種方法：bind,on,delegate,livehtml

先準備一個html頁面再對其中的元素進行事件綁定：jquery

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
  <button id="btn">添加新的p元素</button>
  <p>第一個p元素</p>
  <p>第二個p元素</p>
  <p>第三個p元素</p>
  <p>第四個p元素</p>
  <p>第五個p元素</p>
</div>
 
<script>
$("#btn").click(function(){
  $("div").append("<p>這是一個新的p元素</p>");
});
</script>
 
</body>
</html>

一個簡單的頁面，放置了一個div，div裏面若干個p元素和一個按鈕，點擊按鈕能夠追加p元素。咱們下面將對頁面上的p元素綁定click事件。app

bind()dom

用法：ide

$("div p").bind("click", function () {
    alert($(this).text());
})
/*簡寫*/
$("div p").click(function () {
    alert($(this).text());
})

第一個問題，這裏用了隱式迭代的方法，若是匹配到的元素特別多的時候，好比若是我在div裏放了50個p元素，就得執行綁定50次。對於大量元素來講，影響到了性能。
可是若是是id選擇器，由於id惟一，用bind()方法就很快捷了。
第二個問題，對於還沒有存在的元素，沒法綁定。點擊頁面上的按鈕，將動態添加一個p元素，點擊這個p元素，會發現沒有動做響應。
用delegate方法就能夠解決這兩個問題了。函數

delegate()性能

用法this

$("div").delegate("p", "click", function () {
    alert($(this).text());
});

這種方式採用了事件委託的概念。不是直接爲p元素綁定事件，而是爲其父元素（或祖先元素也可）綁定事件，當在div內任意元素上點擊時，事件會一層層從event target向上冒泡，直至到達你爲其綁定事件的元素，如此例中的div元素。冒泡的過程當中，若是事件的currentTarget與選擇器匹配時，就會執行代碼。spa

這樣就解決了用bind()方法的上面兩個問題，不用再一個個地去爲p元素綁定事件，也能夠爲動態添加進來的p元素綁定。甚至，若是你將事件綁定到document上，都不用等document準備好就可執行綁定。代理

這樣，綁定是容易了，可是調用的時候也可能出現問題。若是事件目標在DOM樹中很深的位置，這樣一層層冒泡上來查找與選擇器匹配的元素，又影響到性能了。

on()

on()實際上是將之前的綁定事件方法做了統一，查看jQuery無壓縮的源碼（版本1.11.3），能夠發現不管bind()仍是delegate()其實都是經過on()方法實現的，只是參數不一樣罷了。

bind: function( types, data, fn ) {
     return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
     return this.off( types, null, fn );
},
delegate: function( selector, types, data, fn ) {
     return this.on( types, selector, data, fn );
}
undelegate: function( selector, types, fn ) {
 // ( namespace ) or ( selector, types [, fn] )
     return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
}

$("div").on("click","p",function(){
    alert($(this).text());
})

移除事件

對應於bind()、delegate()和on()綁定方法，其移除事件的方法分別爲：

$( "div p" ).unbind( "click", handler );
$( "div" ).undelegate( "p", "click", handler );
$( "div" ).off( "click", "p", handler );

總結

1.選擇器匹配到的元素比較多時，不要用bind()迭代綁定

2.用id選擇器時，能夠用bind()

3.須要給動態添加的元素綁定時，用delegate()或者on()

4.用delegate()和on()方法，dom樹不要太深

5.儘可能使用on()

live() 方法

爲被選元素附加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。

經過 live() 方法附加的事件處理程序適用於匹配選擇器的當前及將來的元素（好比由腳本建立的新元素）。

語法
$(selector).live(event,data,function)

例

$("button").live("click",function(){
  $("p").slideToggle(); });

live相比起來更復雜。由於雖然它接在$(‘a’)對象以後，可是它其實是在 $(document)對象上工做。正由於此，它後面所接的方法會難以理解。實際應用中更推薦使用$.live(‘a’,…)以綁定到指定元素上。

只能用CSS選擇符

live方法最大的缺點就是它只能直接使用CSS選擇符來進行操做，這使得這個方法在使用中很是的不靈活。

總結：bind()直接綁定在元素上；

　　　live()經過冒泡的方式來綁定到元素上，更適合列表類型，綁定到document　DOM節點上，和bind()優點是支持動態綁定；

　　　delegate()則是更精確的小範圍使用事件代理，性能優於live；

　　　on()則是最新的1.9版本，整合了前三種方式。

.on方法具體查看：http://www.runoob.com/jquery/event-on.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

js 綁定無響應 父元素監聽，綁定子元素，事件綁定的幾種方法以及區別

js 綁定無響應父元素監聽，綁定子元素，事件綁定的幾種方法以及區別