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

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

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

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

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

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

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

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

　　$(function(){});

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

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

　　hover(over,out)實例：　　

復制代碼代碼如下:

 
<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>頁面加載</div> 
<div>事件綁定</div> 
<div>事件委派</div> 
<div>事件切換</div> 
</div> 
</body> 

toggle(fn,fn)實例:

復制代碼代碼如下:

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

三、事件委派中也只有兩個方法，live()和die()兩個方法，這兩個方法是1.3版本之后才新增的，之前的版本是沒有的。live()可以理解成元素組事件委派方法，比如li元素用live綁定了click事件。那么當在以后增加一個li到這個頁面時，對于這個新增加的li，其click事件依然可用，而無需重新給這種新增加的元素綁定事件，在編寫樹形插件的時候相當有用。die()方法就很好解釋，用來解除live()綁定的方法。

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

復制代碼代碼如下:

 
HTML代碼： 
<ul> 
<li>頁面加載</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ù)單擊項索引獲得文本值 
alert("索引：" + index + ",文本值：" + text); 
}); 

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

復制代碼代碼如下:

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

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

您可能感興趣的文章: