on bind delegate live one 四種方法差別不是特別大 bind講完后，后面的方法只會(huì)說(shuō)不同點(diǎn)

1.bind（）

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

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

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

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

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

obj.click(function(){})

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

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

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

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

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

或者添加多個(gè)事件后 ，函數(shù)使用event.type來(lái)判斷是哪一個(gè)事件來(lái)進(jìn)行各自的函數(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: "你剛點(diǎn)擊了!"}, 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); //還可以通過(guò)取消參數(shù) 來(lái)接觸事件
		}
	});
});

2.live()

和bind方法有兩個(gè)不同

1.沒(méi)有map不能單獨(dú)規(guī)定事件

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

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

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

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

3.delegate ()

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

這個(gè)方法就相當(dāng)于加強(qiáng)版的live()方法，由于live方法事件委托會(huì)直接委托在根節(jié)點(diǎn)上，費(fèi)時(shí)費(fèi)力，

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

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

undelegate()取消綁定事件

4.on()

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

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

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

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

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

5.one()

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

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

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

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

最新評(píng)論