jQuery中事件的相關操做

jQuery中事件的相關操做

綁定事件

1. .bind()

• 能夠爲元素同時綁定多個事件
• 第一個參數是：事件名字,
• 第二個參數是：事件處理函數-匿名函數

綁定一個事件 .bind( "事件名" , "處理函數" ) 綁定多個事件 .bind( { "事件名": "處理函數" , "事件名": "處理函數" , "事件名": "處理函數" } )

//綁定單個事件
 $("#btn").bind("click",function () {
	alert("我被點了");
});

 //bind()方法能夠爲元素同時綁定多個事件
$("#btn").bind({"click":function(){
	alert("我被點了");
},"mouseover":function(){
	$(this).css("backgroundColor","red");
},"mouseout":function(){
	$(this).css("backgroundColor","");
}});
複製代碼

2. .delegate()

• 參數1.要綁定事件的元素---p
• 參數2.要綁定的事件的名字---click
• 參數3.綁定事件的處理函數---匿名函數

//給div標籤裏面的p標籤添加事件
$("#dv").delegate("p","click",function () {
	alert("我被點了");
})
複製代碼

3. on()

• 兩個參數
  • 1事件的名字
  • 2事件處理函數
• 三個參數
  • 1,事件的名字
  • 2.要綁定事件的元素--p
  • 3事件處理函數

父級元素.on("事件類型","子級元素",事件處理函數);

$("#btn").on("click",function () {
	//建立p添加到div中
	$("#dv").append($("<p>這是一個p</p>"));
	
	//爲div中的p標籤綁定事件
	$("#dv").on("click","p",function () {
		alert("我被點了");
	});
});
複製代碼

注意： 在實際的應用中，通常狀況下on比較經常使用，bind與delegate不經常使用

解綁事件

1. 綁定與解綁事件

   • bind() unbind()
   • deledae() undelegate()
   • on() off()

2. 參數

   • （事件名字）要解綁的事件的名字
   • （元素，事件名字）爲那個元素解除那種綁定事件

3. 示例：

$("#dv").unbind("click");
$("#dv").undelegate("click");
$("#dv").off("click");
複製代碼

4. 父子元素事件解綁關係

//下面的代碼是把子級元素的點擊事件解綁了,父級元素的點擊事件還存在
$("#dv").off("click","**");
//移除父級元素和子級元素的全部的事件
$("#dv").off();
複製代碼

注意：

父級元素和子級元素都是經過正常的方式綁定事件,若是經過off解綁的>時候,父級元素的事件解綁了,子級元素的事件沒有解綁

可是:若是子級元素是經過父級元素調用delegate的方式綁定的事件,父>級元素使用off方式解綁事件,這個時候父級元素和子級元素的相同的事>件都會被解綁
複製代碼

觸發事件

1. 直接調用要觸發的元素的方法
2. 使用： trigget(事件名)
3. 使用： triggerHandler(事件名)

$(function () {
	$("#btn1").click(function () {
		$(this).css("backgroundColor","red");
	});
	
	//點擊第二個按鈕-觸發第一個按鈕的點擊事件
	$("#btn2").click(function () {
	
		//觸發事件--3三種方式
		$("#btn1").click();
		
		$("#btn1").trigger("click");//觸發事件
		
		$("#btn1").triggerHandler("click");//觸發事件
	});
});
複製代碼

注意：trigger() 與 triggerHandler() 區別

trigger() 會觸發瀏覽器的默認行爲，並執行事件 triggrtHandler() 不會觸發瀏覽器默認行爲，可是會執行事件 例如：獲取到焦點是瀏覽器的默認行爲

$("#txt").trigger("focus");		//文本框獲取到焦點了
$("#txt").triggerHandler("focus");	//文本框沒有獲取到焦點了
複製代碼

事件對象

$("div").on("click",function(event){} )

• event.delegateTarget：代碼綁定事件的對象
• event.currentTarget：綁定事件的對象
• event.target：真正觸發事件的對象

取消冒泡事件與默認事件

取消冒泡事件

1. event.stoPropagation()
2. return false

取消默認事件

1. event.preventDefault()
2. return false;

例如能夠取消a標籤的默認事件 $("a").preventDefault()