click() bind() live() delegate()區別

click()，bind()，live()都是執行事件時使用的方法，他們之前是有一些區別的，我們在使用這些方法時應該根據需要進行選擇。

bind(type,[data],fn) 爲每個匹配元素的特定事件綁定事件處理函數

$("a").bind("click",function(){alert("ok");});

live(type,[data],fn) 給所有匹配的元素附加一個事件處理函數，即使這個元素是以後再添加進來的

$("a").live("click",function(){alert("ok");});

delegate(selector,[type],[data],fn) 指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數

$("#container").delegate("a","click",function(){alert("ok");})

on(events,[selector],[data],fn) 在選擇元素上綁定一個或多個事件的事件處理函數

差別：

.bind()是直接綁定在元素上

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

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

.on()則是最新的1.9版本整合了之前的三種方式的新事件綁定機制

1.click()方法是我們經常使用的單擊事件方法：

Js代碼

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("a").click(function() {
alert("hello");
});
})
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
	$("a").click(function() {
   		alert("hello");
	});
})
</script>

當點擊<a>時，輸出hello。

2.click()方法是bind()方法的一種簡單方法。在bind()中，jQuery所有JavaScript事件對象，比如focus, mouseover, 和 resize，都是可以作爲type參數傳遞進來的。我們直接看看jQuery文檔中的一個例子：

Js代碼

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
var message = "left";
$("a").bind("click", function() {
alert(message);
return false;
});
var message = "right";
$("a").bind("contextmenu", function() {
alert(message);
return false;
});
})
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
	var message = "left";
	$("a").bind("click", function() {
   		alert(message);
   		return false;
	});

	var message = "right";
	$("a").bind("contextmenu", function() {
   		alert(message);
   		return false;
	});
})
</script>

上邊代碼中，無論是左鍵單擊還是右鍵單擊<a>輸出總是"right"。爲了解決這個問題，我們可以將message作爲data參數傳遞到到bind()方法中，如下：

Js代碼

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
var message = "left";
$("a").bind("click", { msg: message }, function(e) {
alert(e.data.msg);
return false;
});
var message = "right";
$("a").bind("contextmenu", { msg: message }, function(e) {
alert(e.data.msg);
return false;
});
})
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
	var message = "left";
	$("a").bind("click", { msg: message }, function(e) {
	   alert(e.data.msg);
	   return false;
	});

	var message = "right";
	$("a").bind("contextmenu", { msg: message }, function(e) {
	   alert(e.data.msg);
	   return false;
	});
})
</script>

這樣當我們左鍵單擊<a>時，輸出"left"；當右鍵單擊<a>時，輸出"right"。

可見，一般情況下我們使用click()方法就可以了，當需要處理上邊這種情況時，我們要使用bind()方法。

他還可以同時綁定多個時間：

Html代碼

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
var message = "left";
$("a").bind("click", { msg: message }, function(e) {
alert(e.data.msg);
return false;
});
var message = "right";
$("a").bind("contextmenu", { msg: message }, function(e) {
alert(e.data.msg);
return false;
});
//同時綁定多個事件類型/處理程序
$("span").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
//你可以在事件處理之前傳遞一些附加的數據。
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
})
</script>
<style>.entered{background:gray;}</style>
</head>
<body>
<a href="##">==== tester ====</a>
<span><<<< control-p >>>></span>
<p style="height:200px;border:red 1px solid;" id="#foo">this is a test...</p>
</body>
</html>

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
	var message = "left";
	$("a").bind("click", { msg: message }, function(e) {
	   alert(e.data.msg);
	   return false;
	});

	var message = "right";
	$("a").bind("contextmenu", { msg: message }, function(e) {
	   alert(e.data.msg);
	   return false;
	});

	//同時綁定多個事件類型/處理程序
	$("span").bind({
		click:function(){$("p").slideToggle();},
		mouseover:function(){$("body").css("background-color","red");},  
		mouseout:function(){$("body").css("background-color","#FFFFFF");}  
	});

	//你可以在事件處理之前傳遞一些附加的數據。
	function handler(event) {
		alert(event.data.foo);
	}
	$("p").bind("click", {foo: "bar"}, handler)
})

</script>
<style>.entered{background:gray;}</style>
</head>

<body>
	<a href="##">==== tester ====</a>
	<span><<<< control-p >>>></span>
	<p style="height:200px;border:red 1px solid;" id="#foo">this is a test...</p>
</body>
</html>

3.live()給所有匹配的元素附加一個事件處理函數，即使這個元素是以後再添加進來的也有效。如下：

Js代碼

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("div.live").bind("click", function() {
alert("success");
});
})
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
	$("div.live").bind("click", function() {
   		alert("success");
	});
})
</script>

此時，當點擊class爲live的div時，輸出"success"。此時如果有一個新的元素添加了進來，如下：

Js代碼

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("<div class="live" href="#">live</div>").appendTo("body");
})
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
	$("<div class="live" href="#">live</div>").appendTo("body");
})
</script>

這時，當使用上邊方法點擊class爲live的a標籤時，不會執行。原因在於，這個元素是在調用bind()之後添加的，而使用live()方法使得在後邊添加的元素也能夠執行相應的事件，如下：

Js代碼

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("div.live").live("click", function() {
alert("success");
});
})
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
	$("div.live").live("click", function() {
   		alert("success");
	});
})
</script>

這樣，當我們單擊class爲live的a標籤時，如果此a標籤是後邊添加的，也能照常輸出"success"。至於原因，在這裏不做具體的說明，本篇主要比較幾種方法的區別。

最後，看看delegate()方法，這個方法到目前爲止我自己還沒有使用過，應該是在1.4.2中才有的。

live()方法的一個不足在於它不支持鏈式寫法：

Js代碼

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("#test").children("a").live("mouseover", function() {
alert("hello");
});
})
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
	$("#test").children("a").live("mouseover", function() {
    		alert("hello");
	});
})
</script>

上邊這種寫法並不會輸出，我們使用delegate()可以寫爲：

Js代碼

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("#test").delegate("a", "mouseover", function() {
alert("hello");
});
})
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
	$("#test").delegate("a", "mouseover", function() {
    		alert("hello");
	});
})
</script>

這樣就可以正常的輸出我們想要的結果了。本篇總結了click()、bind()、live()和delegate()方法，其中並沒有做非常詳細的解釋，僅望能對大家在具體使用時有所幫助。

原文：jQuery方法區別(四)click() bind() live() delegate()區別

.delegate()

Js代碼

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$('#container').delegate('a', 'click', function() { alert("That tickles!") });
})
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
	$('#container').delegate('a', 'click', function() { alert("That tickles!") });
})
</script>

JQuery掃描文檔查找$(‘#container’)，並使用click事件和’a’這一CSS選擇器作爲參數把alert函數綁定到$(‘#container’)上。任何時候只要有事件冒泡到$(‘#container’)上，它就查看該事件是否是click事件，以及該事件的目標元素是否與CCS選擇器相匹配。如果兩種檢查的結果都爲真的話，它就執行函數。

　　可以注意到，這一過程與.live()類似，但是其把處理程序綁定到具體的元素而非document這一根上。精明的JS’er們可能會做出這樣的結論，即$('a').live() == $(document).delegate('a')，是這樣嗎?嗯，不，不完全是。

　　爲什麼.delegate()要比.live()好用

　　基於幾個原因，人們通常更願意選用jQuery的delegate方法而不是live方法。考慮下面的例子：

Js代碼

$('a').live('click', function() { blah() });
// 或者
$(document).delegate('a', 'click', function() { blah() });

$('a').live('click', function() { blah() }); 
// 或者 
$(document).delegate('a', 'click', function() { blah() });

　　速度

　　後者實際上要快過前者，因爲前者首先要掃描整個的文檔查找所有的$(‘a’)元素，把它們存成jQuery對象。儘管live函數僅需要把’a’作爲串參數傳遞以用做之後的判斷，但是$()函數並未知道被鏈接的方法將會是.live()。

　　而另一方面，delegate方法僅需要查找並存儲$(document)元素。

　　一種尋求避開這一問題的方法是調用在$(document).ready()之外綁定的live，這樣它就會立即執行。在這種方式下，其會在DOM獲得填充之前運行，因此就不會查找元素或是創建jQuery對象了。

　　靈活性和鏈能力

　　live函數也挺令人費解的。想想看，它被鏈到$(‘a’)對象集上，但其實際上是在$(document)對象上發生作用。由於這個原因，它能夠試圖以一種嚇死人的方式來把方法鏈到自身上。實際上，我想說的是，以$.live(‘a’,…)這一形式作爲一種全局性的jQuery方法，live方法會更具意義一些。

　　僅支持CSS選擇器

　　最後一點，live方法有一個非常大的缺點，那就是它僅能針對直接的CSS選擇器做操作，這使得它變得非常的不靈活。

　　爲什麼選擇.live()或.delegate()而不是.bind()

　　畢竟，bind看起來似乎更加的明確和直接，難道不是嗎?嗯，有兩個原因讓我們更願意選擇delegate或live而不是bind：

　　爲了把處理程序附加到可能還未存在於DOM中的DOM元素之上。因爲bind是直接把處理程序綁定到各個元素上，它不能把處理程序綁定到還未存在於頁面中的元素之上。

　　如果你運行了$(‘a’).bind(…)，而後新的鏈接經由AJAX加入到了頁面中，則你的bind處理程序對於這些新加入的鏈接來說是無效的。而另一方面live和delegate則是被綁定到另一個祖先節點上，因此其對於任何目前或是將來存在於該祖先元素之內的元素都是有效的。

　　或者爲了把處理程序附加到單個元素上或是一小組元素之上，監聽後代元素上的事件而不是循環遍歷並把同一個函數逐個附加到DOM中的100個元素上。把處理程序附加到一個(或是一小組)祖先元素上而不是直接把處理程序附加到頁面中的所有元素上，這種做法帶來了性能上的好處。

　　停止傳播

　　最後一個我想做的提醒與事件傳播有關。通常情況下，我們可以通過使用這樣的事件方法來終止處理函數的執行：

Js代碼

$('a').bind('click', function(e) {
　　e.preventDefault();
　　// 或者
　　e.stopPropagation();
});

$('a').bind('click', function(e) { 
　　e.preventDefault(); 
　　// 或者 
　　e.stopPropagation(); 
});

　　不過，當我們使用live或是delegate方法的時候，處理函數實際上並沒有在運行，需要等到事件冒泡到處理程序實際綁定的元素上時函數纔會運行。而到此時爲止，我們的其他的來自.bind()的處理函數早已運行了。

click() bind() live() delegate()區別

1.click()方法是我們經常使用的單擊事件方法：

2.click()方法是bind()方法的一種簡單方法。在bind()中，jQuery所有JavaScript事件對象，比如focus, mouseover, 和 resize，都是可以作爲type參數傳遞進來的。我們直接看看jQuery文檔中的一個例子：

3.live()給所有匹配的元素附加一個事件處理函數，即使這個元素是以後再添加進來的也有效。如下：

最後，看看delegate()方法，這個方法到目前爲止我自己還沒有使用過，應該是在1.4.2中才有的。

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

Powershell 功能函數大全（Sharepoint 2013/2010）

Client Call SharePoint Web Service(SOAP)

How to get current date time in SharePoint Site Time Zone

The Future for SharePoint: On Premises Vs Online

Post/Reply a post by Social feed REST API in SharePoint 2013

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結