Jquery之事件冒泡和移出事件

冒泡事件

例如:div綁定一個click事件,而鑲嵌在div的span標籤也綁定一個click事件,這樣就有兩個元素響應一個事件.

栗子:

<a href="#">這是一個連接...</a>
<div>
div元素
<span>span元素</span>
</div>
<div id="result">
<script>
$("a").bind("click",function(event){
	alert(event.target);
	alert(event.relatedTarget);	
 //阻止元素默認行爲,例如,當點擊鏈接或者表單提交時有不經過的內容則能夠使用此方法,和       //	return false功能相同
	 event.preventDefault();
	//return false;
});
 $("div").bind("click",function(event){
	 var divHtml=$("div").html();
	 $("#result").html(divHtml);
 });
 $("span").bind("click",function(event){
	 var spanHtml=$("span").html();
	 $("#result").html(spanHtml);
	// event.stopPropagation();
 });

移出事件:

bind()的反向操做，從每個匹配的元素中刪除綁定的事件。

 

unbind(type,[data|fn])

Type:事件響應類型,click,submit,blur等

Data|Fn:要移出綁定的方法名稱

 

若是沒有參數，則刪除全部綁定的事件。

你能夠將你用bind()註冊的自定義事件取消綁定。

若是提供了事件類型做爲參數，則只刪除該類型的綁定事件。

若是把在綁定時傳遞的處理函數做爲第二個參數，則只有這個特定的事件處理函數會被刪除。

栗子:

$("span").bind("click",function(event){
	 var spanHtml=$("span").html();
	 $("#result").html(spanHtml);
	 event.stopPropagation();
 }); 
 //若是這樣放在一塊兒寫,在頁面加載完畢後,上面的的click綁定事件將再也不有效
 $("span").unbind("click");

若是在一次綁定事件響應後,再也不起做用,咱們能夠用

one(type,[data],fn)

爲每個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數

 

type:添加到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。

data:將要傳遞給事件處理函數的數據映射(這個是什麼東西啊?)

fn:每當事件觸發時執行的函數。

 

栗子:

 //一次性的綁定事件,只在第一次點擊後有效,其餘的均無效

  $("span").one("click",function(){

 var spanHtml=$("span").html();

 $("#result").html(spanHtml);

 event.stopPropagation();

 });