on bind delegate live one 四種方法差別不是特別大 bind講完后，后面的方法只會說不同點

1.bind（）

$(selector).bind(event,data,function,map)

event    必需。規(guī)定添加到元素的一個或多個事件。

最簡單的寫法 綁定單個事件執(zhí)行事件函數(shù)，

$("p").bind("click",function(){
    alert("這個段落被點擊了。");
});

這樣寫跟普通的寫法沒區(qū)別  就沒必要使用綁定事件方法了

obj.click(function(){})

注：js同一個dom元素多次綁定同一事件，只會執(zhí)行最后一次的事件，所以如果有這種需求，需要使用addEventListener方法添加事件，jquery則不會 它會全部執(zhí)行，兩者都是同時執(zhí)行，并不是按順序一一執(zhí)行。

bind（）方法可以進行多個事件綁定，添加回調(diào)函數(shù)，

$(document).ready(function(){
  $("p").bind("mouseover mouseout",function(){
    $("p").toggleClass("intro");
  });
});

兩個事件分別執(zhí)行一次函數(shù)內(nèi)容，如果要事件單獨執(zhí)行各自的函數(shù) 可以使用map映射（分開寫）的方法，就可以各自執(zhí)行了，

$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","#E9E9E4");},  
  });
});

或者添加多個事件后 ，函數(shù)使用event.type來判斷是哪一個事件來進行各自的函數(shù)內(nèi)容。

$(document).ready(function(){
  $("p").bind("click dblclick mouseover mouseout",function(e){
if(e.type == 'click'){
alert('這是click事件')
}else if(e.type == 'dblclick'){
alert('這是dbclick事件')
}
  });
});

data是可選的額外添加的數(shù)據(jù)，函數(shù)中可以用event.data接受使用。

$(document).ready(function(){
	$("p").bind("click", {msg: "你剛點擊了!"}, function handlerName(e){
			alert(e.data.msg);	})
});

取消綁定用 unbind()方法

$("button").click(function(){
$("p").unbind();     //取消p標(biāo)簽所有綁定的事件
});

unction alertMe()
{
	alert("Hello World!");
}
$(document).ready(function(){
  $("p").click(alertMe);
	$("p").click(function(){
	alert(123)});
  $("button").click(function(){
    $("p").unbind("click",alertMe);       //將p標(biāo)簽單擊調(diào)用alertMe的事件取消
  });
});

$(document).ready(function(){
	var x=0;
	$("p").click(function(e){
		$("p").animate({fontSize:"+=5px"});
		x++;
		if (x>=2)
		{
			$(this).unbind(e); //還可以通過取消參數(shù) 來接觸事件
		}
	});
});

2.live()

和bind方法有兩個不同

1.沒有map不能單獨規(guī)定事件

2.live方法綁定的事件會應(yīng)用于當(dāng)前現(xiàn)有的元素以及未來元素，也就是事件委托機制，把節(jié)點的處理統(tǒng)一委托給了根節(jié)點document，所以后面動態(tài)添加的新節(jié)點同樣會有相同的事件。

$("button").live("click",function(){
$("p").slideToggle();  //給所有的p節(jié)點添加了收縮事件，包括動態(tài)添加的新的p標(biāo)簽
});

注：使用live（）方法只能放在直接選擇的元素后面，不能在層級比較深，連綴的DOM遍歷方法后面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行； 

取消綁定用die()方法 跟unbind()一樣。

3.delegate ()

$(selector).delegate(childSelector,event,data,function)

這個方法就相當(dāng)于加強版的live()方法，由于live方法事件委托會直接委托在根節(jié)點上，費時費力，

于是就有了delegate()方法，它可以選擇委托范圍，就是給selector父節(jié)點內(nèi)的所有childSelector子節(jié)點綁定事件。

$(document).ready(function(){
  $("div").delegate("p","click",function(){   //給div里的p標(biāo)簽綁定事件
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>這是一個新段落。</p>").insertAfter("button");//動態(tài)添加的新標(biāo)簽會保留事件
  });
});

undelegate()取消綁定事件

4.on()

究極進化的產(chǎn)物，集前面三位所長為一身，也是最推薦用的，在版本更新迭代中，前面三位有的無了。

$(selector).on(event,childSelector,data,function)   和delegate書寫順序不同 這個on要先寫事件

它既可以給單個標(biāo)簽綁定事件，有map映射，也可以自主選擇事件委托對象給后面動態(tài)創(chuàng)建的節(jié)點綁定事件。

取消綁定事件的方法是off（）

這里就不做演示了 跟上面的大同小異，大家趕快去試試吧！

5.one()

$(selector).one(event,data,function)

one()方法相當(dāng)于bind區(qū)別是one只執(zhí)行一次,就會自動解除事件.

$(document).ready(function(){
  $("p").one("click",function(){
    $(this).animate({fontSize:"+=6px"});
  });
});

到此這篇關(guān)于jquery 事件綁定及取消 bind live delegate on one區(qū)別 （超詳細且通俗易懂）的文章就介紹到這了,更多相關(guān)jquery 事件綁定及取消內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論