DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JQuery中DOM事件綁定用法詳解
JQuery中DOM事件綁定用法詳解
編輯:JavaScript綜合知識     

 在文檔加載完成後,如果打算為元素綁定事件來完成某些操作,則可以使用bind()方法來對匹配元素進行特定事件的綁定,bind()方法的調用格式為:

bind( type [, data] , fn);

bind()方法有3個參數,說明如下。

第1個參數是事件類型,類型包括:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等,當然也可以是自定義名稱。
第2個參數為可選參數,作為event.data屬性值傳遞給事件對象的額外數據對象。
第3個參數則是用米綁定的處理函數。

可以發現,jQuery中的事件綁定類型比普通的JavaScript事件綁定類型少了“on”。例如鼠標單擊事件在jQuer中對應的是click事件,而在JavaScript中對應的是onclick()函數。

按照需求,需要完成以下幾個步驟。

1. 等待DOM加載完畢。
2. 找到“標題”所在的元素,綁定click事件。
3. 找到“內容”元素,將“內容”元素顯示。

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

與ready()方法一樣,bind()方法也可以多次調用。

上面jQuery代碼中有一個關鍵字this,與在JavaScript中的作用一樣,this引用的是攜帶相應行為的DOM元素。為了使該DOM元素能夠使用jQuery中的方法,可以使用$(this)將其轉換為jQuery對象。

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

上面的例子中,給元素綁定的事件類型是click,當用戶單擊的時候會觸發綁定的事件,然後執行事件的函數代碼。現在把事件類型換成mouseover和mouseout,即當光標滑過的時候,就觸發事件。需要進行以下幾步操作。

1. 等待DOM加載完畢。
2. 找到“標題”所在的元素,綁定mouseover事件。
3. 找到“內容”元素,顯示“內容”。
4. 找到“標題”所在的元素,綁定mouseout事件。
5. 找到“內容”元素,隱藏“內容”。

代碼運行後,當光標滑過“標題”鏈接後,相應的“內容”將被顯示。當光標滑出“標題”鏈接後,相應的“內容”則被隱藏。

代碼如下:

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

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

像click、mouseover和mouseout這類事件,在程序中經常會使用到,jQuery為此也提供了一套簡寫的方法。簡寫方法和bind()方法的使用類似,實現的效果也相同,惟一的區別是能夠減少代碼量。

例如把上面的例子改寫成使用簡寫綁定事件的方式,代碼如下:

1 2 3 4 5 6 7 8 $(function(){ $("#panel2 h5.head").mouseover(function(){ $(this).next().show(); }); $("#panel2 h5.head").mouseout(function(){ $(this).next().hide(); }) })
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved