快捷導(dǎo)航

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

更新時(shí)間：2010年11月25日 18:21:33 作者：

JQuery的事件處理機(jī)制在JQuery框架中起著重要的左右，它就像電視機(jī)的開(kāi)關(guān)，我們打開(kāi)電視機(jī)的開(kāi)關(guān)才能看到各個(gè)電視臺(tái)精彩的節(jié)目，那么我們使用JQuery的事件處理機(jī)制就可以創(chuàng)造我們自定義的行為，比如說(shuō)提交、改變樣式、效果顯示等等，使我們的網(wǎng)頁(yè)更加豐富。

當(dāng)然它的優(yōu)點(diǎn)并不只在于這點(diǎn)，使用JQuery事件處理機(jī)制比直接使用Javascript本身內(nèi)置的一些事件相應(yīng)方式更加的靈活，更加不容易暴露在外，而且有更加優(yōu)雅的語(yǔ)法，大大減少了我們工作的量度。

　　JQuery的事件處理機(jī)制包括：頁(yè)面加載、事件綁定、事件委派、事件切換四種機(jī)制。我們先從$(document).ready()事件開(kāi)始。

　　一、頁(yè)面加載$(document).ready()相當(dāng)與Javascript中的onLoad()事件，都是在頁(yè)面加載的時(shí)候執(zhí)行該方法，但是兩者又有著微妙的差別，ready()事件是當(dāng)HTML下載完成并解析成DOM樹(shù)之后就可以執(zhí)行，而onLoad()事件要等HTML包括文件都下載完成之后才能執(zhí)行。我們?cè)趓eady()事件中可以綁定其他的一些事件或者函數(shù)，ready()有幾種語(yǔ)法可以表示：

　　$(document).ready(function(){});

　　$().ready(function(){});

　　$(function(){});

　　當(dāng)然我個(gè)人還是習(xí)慣于用第一種，增強(qiáng)可讀性，需要注意的是在使用ready()事件的時(shí)候請(qǐng)確保在 <body> 元素的onload事件中沒(méi)有注冊(cè)函數(shù)，否則不會(huì)觸發(fā)$(document).ready()事件。也可以在同一個(gè)頁(yè)面中無(wú)限次地使用$(document).ready()事件。其中注冊(cè)的函數(shù)會(huì)按照（代碼中的）先后順序依次執(zhí)行。

　　二、事件切換只有兩個(gè)方法，就是hover()和toggle()兩個(gè)方法，由于他們截取組合的用戶(hù)操作，并且以多個(gè)函數(shù)響應(yīng)，因此也稱(chēng)為復(fù)合事件處理機(jī)制。hover()方法是一個(gè)模仿鼠標(biāo)懸停變化的方法，簡(jiǎn)單的說(shuō)就是鼠標(biāo)移入移出是時(shí)候執(zhí)行你指定的行為的方法，我們最常用的就是做菜單切換效果。toggle()方法就是當(dāng)你點(diǎn)擊按照順序執(zhí)行你指定的函數(shù)方法，第一次點(diǎn)擊執(zhí)行第一個(gè)函數(shù)，第二次點(diǎn)擊執(zhí)行第二個(gè)函數(shù)，以此類(lèi)推，它可以使用事件綁定中的unbind('click')方法刪除。

　　hover(over,out)實(shí)例：　　

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

 
<style type="text/css"> 
#Menu 
{ 
background-color:Red; 
width:150px; 
height:30px; 
text-align:center; 
border:solid 1px black; 
} 
#Menu_child 
{ 
width:150px; 
border:solid 1px black; 
display:none; 
} 
#Menu_child div 
{ 
background-color:#f3f3f3; 
width:150px; 
height:30px; 
text-align:center; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
$("#Menu").hover( 
function() { 
$("#Menu_child").fadeIn(); 
}, 
function() { 
$("#Menu_child").fadeOut(); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="Menu">JQuery事件處理</div> 
<div id="Menu_child"> 
<div>頁(yè)面加載</div> 
<div>事件綁定</div> 
<div>事件委派</div> 
<div>事件切換</div> 
</div> 
</body> 

toggle(fn,fn)實(shí)例:

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

 
HTML代碼 
<input type="button" value="toggle()方法" id="toggle" /> 
JQuery代碼 
$("#toggle").toggle( 
function() { 
alert("第一次點(diǎn)擊"); 
}, 
function() { 
alert("第二次點(diǎn)擊"); 
}, 
function() { 
alert("第三次點(diǎn)擊"); 
}, 
function() { 
alert("第四次點(diǎn)擊"); 
}); 

三、事件委派中也只有兩個(gè)方法，live()和die()兩個(gè)方法，這兩個(gè)方法是1.3版本之后才新增的，之前的版本是沒(méi)有的。live()可以理解成元素組事件委派方法，比如li元素用live綁定了click事件。那么當(dāng)在以后增加一個(gè)li到這個(gè)頁(yè)面時(shí)，對(duì)于這個(gè)新增加的li，其click事件依然可用，而無(wú)需重新給這種新增加的元素綁定事件，在編寫(xiě)樹(shù)形插件的時(shí)候相當(dāng)有用。die()方法就很好解釋?zhuān)脕?lái)解除live()綁定的方法。

　　live(type,fn):live()中type參數(shù)目前只支持click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup事件。實(shí)例如下

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

 
HTML代碼： 
<ul> 
<li>頁(yè)面加載</li> 
<li>事件綁定</li> 
<li>事件委派</li> 
<li>事件切換</li> 
</ul> 
JQuery代碼： 
$("li").live('click', function() { 
var index = $("li").index(this);//獲取li的索引 
var text = $("li").eq(index).text();//根據(jù)單擊項(xiàng)索引獲得文本值 
alert("索引：" + index + ",文本值：" + text); 
}); 

die([type],[fn]):die()使用起來(lái)相當(dāng)簡(jiǎn)單，一種刪除所有l(wèi)ive()事件，一種指定刪除，兩個(gè)參數(shù)是可選的。

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

 
$("#die").click(function() { 
$("li").die(); //刪除所有l(wèi)ive()事件 
$("li").die("click");//刪除指定為click的live()事件 
$("li").die('click', function() { alert("刪除live()事件成功") });//刪除指定為click的live()事件并執(zhí)行函數(shù) 
}); 

僅供參考，歡迎感興趣的朋友參與討論。下篇文章再說(shuō)事件綁定，寫(xiě)一起太長(zhǎng)了。未完待續(xù)........

您可能感興趣的文章: