快捷導(dǎo)航

初窺JQuery(二)事件機(jī)制(2)

更新時(shí)間：2010年12月06日 15:53:06 作者：

上篇文章我簡(jiǎn)單的描述了加載頁(yè)面、事件委派、事件切換三種JQuery的事件機(jī)制，這篇文章我講下在JQuery事件機(jī)制中占主導(dǎo)地位并且在我們的實(shí)際工作中最常用到的機(jī)制-事件處理

簡(jiǎn)單的說(shuō)Jquery的事件處理機(jī)制就相當(dāng)與在HTML標(biāo)簽中指定各種事件，比如onclick(),keydown()等，在標(biāo)簽中指定事件對(duì)應(yīng)到Javascript的函數(shù)，便于我們實(shí)現(xiàn)我要求。而JQuery的事件處理則是將這些事件綁定到腳本內(nèi)部，使我們無(wú)須將函數(shù)暴露在標(biāo)簽中，而且使用起來(lái)非常方便。

　　在介紹方法之前，我覺(jué)得有必要描述一下響應(yīng)事件的兩種策略，一種是事件捕獲(Event capturing)，一種是事件冒泡(Event bubble)，這兩種策略是相對(duì)立的，它們是在瀏覽器大戰(zhàn)中分別由Netscape和微軟提出的完全相反的兩種事件傳播模型。事件冒泡定義為在一個(gè)對(duì)象上觸發(fā)某類事件（比如單擊onclick事件），如果此對(duì)象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒(méi)有定義此事件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播，從里到外，直至它被處理（父級(jí)對(duì)象所有同類事件都將被激活），或者它到達(dá)了對(duì)象層次的最頂層。而事件捕獲則與事件冒泡則恰好相反，處理事件是從對(duì)象的最外層往里傳播，直到終止。W3C標(biāo)注是支持兩種事件處理策略的，但是卻更偏向于事件冒泡，因?yàn)槭录东@Bug較多，目前IE是不支持事件捕獲的，其他瀏覽器基本兩種都支持。下面我給一個(gè)事件冒泡的例子，自己試一下就明白了，至于事件捕獲就算了.....
事件冒泡

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JavaScript事件冒泡</title> 
<style type="text/css"> 
#box {width:200px; height:100px; border:2px solid red} 
#box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:red; cursor:move} 
#box h5 a {text-decoration:none; color:#FFF} 
#box div{ white-space:inherit;} 
</style> 
</head> 
<body> 
<div id="box"> 
<h5 onmousedown="startDrag();"><a onmousedown="closeBox();" href="javascript:void(0);">關(guān)閉</a></h5> 
<div id="testInfo"></div> 
</div> 
<script type="text/javascript"> 
function startDrag() { 
document.getElementById('testInfo').innerHTML += '層事件'; 
} 
function closeBox(e) { 
document.getElementById('testInfo').innerHTML += '關(guān)閉事件'; 
//將下面一段注釋去掉則可以阻止冒泡 
// if (e && e.stopPropagation) 
// e.stopPropagation(); 
// else 
// window.event.cancelBubble = true; 
} 
</script> 
</body> 
</html> 

那么在JQuery中阻止事件策略的方法有event.preventDefault();(阻止默認(rèn)行為)、event.stopPropagation();event.stopImmediatePropagation();(阻止事件冒泡)、直接返回return false;(阻止默認(rèn)行為和時(shí)間冒泡)。

　　事件處理包括bind(type,[data],fn)、bind(map)、one(type,[data],fn)、trigger(type,[data])、triggerHandler(type,[data])、unbind([type],[data])這幾個(gè)方法。

　　1、bind(type,[data],fn)用于為指定元素綁定指定的事件處理函數(shù)，[data]代表可選的傳遞的參數(shù)，它的寫法為：

復(fù)制代碼代碼如下:

 
//帶參數(shù)的綁定方式 
$("#text").bind('click', { result: "yes" }, function(event) { 
alert(event.data.result); 
}) 
//不帶參數(shù)并且阻止冒泡 
$("#text").bind('click', function(e) { 
//自定義處理行為 
e.stopPropagation(); 
}) 

其實(shí)bind(type,[data],fn)這種綁定事件的方式我們還有一種簡(jiǎn)寫的方式，但是他們的區(qū)別在于簡(jiǎn)寫方式不能如bind一樣指定參數(shù)[data]，他的寫法就是直接將bind中type參數(shù)執(zhí)行，如下：

復(fù)制代碼代碼如下:

 
$("#text").click(function(e) { 
//自定義處理行為 
alert("簡(jiǎn)寫方式"); 
}) 

2、bind(map)就是一次性為元素綁定多個(gè)事件處理函數(shù)，寫法如下

復(fù)制代碼代碼如下:

 
$('#text').bind({ 
click: function() { 
alert("bind(map)綁定的click事件"); 
}, 
mouseenter: function() { 
alert("bind(map)綁定的mouseenter事件"); 
} 
}); 

3、one(type,[data],fn)指定事件只執(zhí)行一次，寫法與bind()方法一樣，在此就不做示范。

　　4、trigger(type,[data])、triggerHandler(type,[data])其實(shí)作用是一樣的，都是在每一個(gè)匹配的元素上觸發(fā)某類事件，唯一的區(qū)別就是前者是執(zhí)行事件冒泡事件的，而后者只執(zhí)行指定元素的事件。下面做個(gè)比較：

復(fù)制代碼代碼如下:

 
//HTML代碼： 
<button id="trigger">trigger()</button> 
<button id="triggerHandler">triggerHandler()</button><br/><br/> 
<div id="triggerdiv"> 
<div id="tri"></div> 
</div> 
//JQuery代碼 
$("#triggerdiv").click(function() { 
alert("DIV觸發(fā)"); 
}); 
$("#trigger").click(function() { 
$("#tri").trigger("click"); 
}); 
$("#triggerHandler").click(function() { 
$("#tri").triggerHandler("click"); 
}); 
$("#tri").click(function() { 
alert("子集DIV觸發(fā)"); 
}); 

5、unbind([type],[data])就再簡(jiǎn)單不過(guò)了，刪除指定元素的綁定事件，如果指定type參數(shù)則刪除指定的事件，如果沒(méi)有指定則刪除該指定元素的所有事件。

　　在這些事情機(jī)制中我最常用到的還是bind方法，再常用的就是它的簡(jiǎn)寫方式。當(dāng)然這些事件機(jī)制是可以結(jié)合起來(lái)用的，關(guān)鍵看業(yè)務(wù)需求而定。

前面有人說(shuō)我寫的太簡(jiǎn)單了，在這里我也再次聲明一下，我講的是基礎(chǔ)，我本身接觸JQuery也沒(méi)多久，用意在于加深自己記憶和給剛學(xué)習(xí)JQuery的朋友一些資料而已，并不是想說(shuō)我JQuery很厲害。希望大家共同學(xué)習(xí)，一起進(jìn)步。未完待續(xù)......

您可能感興趣的文章: