這篇文章主要介紹了JQuery中DOM事件綁定用法,實(shí)例分析了bind方法綁定事件的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JQuery中DOM事件綁定用法。分享給大家供大家參考。具體分析如下：

在文檔加載完成后，如果打算為元素綁定事件來完成某些操作，則可以使用bind()方法來對(duì)匹配元素進(jìn)行特定事件的綁定，bind()方法的調(diào)用格式為：

bind( type [, data] , fn);

bind()方法有3個(gè)參數(shù)，說明如下。

第1個(gè)參數(shù)是事件類型，類型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等，當(dāng)然也可以是自定義名稱。

第2個(gè)參數(shù)為可選參數(shù)，作為event.data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象。

第3個(gè)參數(shù)則是用米綁定的處理函數(shù)。

可以發(fā)現(xiàn)，jQuery中的事件綁定類型比普通的JavaScript事件綁定類型少了“on”。例如鼠標(biāo)單擊事件在jQuer中對(duì)應(yīng)的是click事件，而在JavaScript中對(duì)應(yīng)的是onclick()函數(shù)。

按照需求，需要完成以下幾個(gè)步驟。

1. 等待DOM加載完畢。

2. 找到“標(biāo)題”所在的元素，綁定click事件。

3. 找到“內(nèi)容”元素，將“內(nèi)容”元素顯示。

1. $(function(){ 
2. $("#panel h5.head").bind("click",function(){ 
3. var $content = $(this).next(); 
4. if($content.is(":visible")){ 
5. $content.hide(); 
6. }else{ 
7. $content.show(); 
8. } 
9. }) 
10. }) 

與ready()方法一樣，bind()方法也可以多次調(diào)用。

上面jQuery代碼中有一個(gè)關(guān)鍵字this，與在JavaScript中的作用一樣，this引用的是攜帶相應(yīng)行為的DOM元素。為了使該DOM元素能夠使用jQuery中的方法，可以使用$(this)將其轉(zhuǎn)換為jQuery對(duì)象。

為了判斷元素是否顯示，可以使用jQuery中的is()方法來完成。在代碼中，發(fā)現(xiàn)$(this).next("div.content")被多次使用，因此可以為它定義一個(gè)局部變量：$content。

上面的例子中，給元素綁定的事件類型是click，當(dāng)用戶單擊的時(shí)候會(huì)觸發(fā)綁定的事件，然后執(zhí)行事件的函數(shù)代碼。現(xiàn)在把事件類型換成mouseover和mouseout，即當(dāng)光標(biāo)滑過的時(shí)候，就觸發(fā)事件。需要進(jìn)行以下幾步操作。

1. 等待DOM加載完畢。

2. 找到“標(biāo)題”所在的元素，綁定mouseover事件。

3. 找到“內(nèi)容”元素，顯示“內(nèi)容”。

4. 找到“標(biāo)題”所在的元素，綁定mouseout事件。

5. 找到“內(nèi)容”元素，隱藏“內(nèi)容”。

代碼運(yùn)行后，當(dāng)光標(biāo)滑過“標(biāo)題”鏈接后，相應(yīng)的“內(nèi)容”將被顯示。當(dāng)光標(biāo)滑出“標(biāo)題”鏈接后，相應(yīng)的“內(nèi)容”則被隱藏。

代碼如下：

1. $(function(){  
2. $("#panel h5.head").bind("mouseover",function(){  
3. $(this).next().show();  
4. });  
5. $("#panel h5.head").bind("mouseout",function(){  
6. $(this).next().hide();  
7. })  
8. }) 

在上面幾個(gè)例子中，分別用bind()方法給“標(biāo)題”綁定了click事件、mouseover事件和mouseout事件，綁定方法都一樣。除此之外，bind0方法還能綁定其他所有的JavaScript事件。

像click、mouseover和mouseout這類事件，在程序中經(jīng)常會(huì)使用到，jQuery為此也提供了一套簡(jiǎn)寫的方法。簡(jiǎn)寫方法和bind()方法的使用類似，實(shí)現(xiàn)的效果也相同，惟一的區(qū)別是能夠減少代碼量。

例如把上面的例子改寫成使用簡(jiǎn)寫綁定事件的方式，代碼如下：

1. $(function(){ 
2. $("#panel2 h5.head").mouseover(function(){ 
3. $(this).next().show(); 
4. }); 
5. $("#panel2 h5.head").mouseout(function(){ 
6. $(this).next().hide(); 
7. }) 
8. }) 

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。