JQuery中Bind()事件用法分析

JQuery中Bind()事件用法分析

　　這篇文章主要介紹了JQuery中Bind()事件用法,執行個體分析了Bind()事件的功能、特點與綁定事件時的提示,需要的朋友可以參考下

　　本文執行個體分析了JQuery中Bind()事件用法。分享給大家供大家參考。具體分析如下：

　　我們先看一下它的定義：

　　?

1	.bind( eventType [, eventData], handler(eventObject))

　　.Bind()方法的主要功能是在向它綁定的對象上面提供一些事件方法的行為。期中它的三個參數的意義分別如下：

　　eventType是一個字串類型的事件類型，就是你所需要綁定的事件。這類類型可以包括如下：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。這裡需要注意的是，這裡用的都是javascript裡面的事件方法，而不是JQuery裡面的，JQuery裡面的事件方法均在JavaScript 前面多了一個“on”，比如onclick,onblur 等等。

　　eventData參數是一個選擇性參數，不過它在平時用的比較少。如果提供了這個參數，那麼我們就能把一些附加資訊傳遞給事件處理函數了。這個參數有個很好的用處，就是處理閉包帶來的問題。待會在給大家舉執行個體。

　　Handler是用來綁定的處理數，其實也也就是回呼函數，處理完資料之後相應的方法。

　　1.第一個簡單的bind ()事件---Hello Word

　　?

1 2 3 4 5 6 7 8

<input id="BtnFirst"type="button"value="Click Me"/> <script> $(function () { $("#BtnFirst").bind("click",function(){ alert("Hello World"); }); }) </script>

　　開啟頁面之後，點擊按鈕“Click Me”，就會彈出”Hello World”。這算是我們最簡單的綁定事件吧。很簡單吧。

　　2.綁定多個事件

　　我們可以通過bind()來綁定多個事件(其實，這也就是JQuery以及Linq中非常有名的鏈式編程)。實現的主要功能就是當我們點擊的時候，彈出“Hello World”，當離開button的時候，顯示出一個div。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13

<div> <input id="BtnFirst"type="button"value="Click Me"/></div> <div id="TestDiv"style=" width:200px; height:200px; display:none; "> </div> <script> $(function () { $("#BtnFirst").bind("click", function () { alert("Hello World"); }).bind("mouseout", function () { $("#TestDiv").show("slow"); }); }) </script>

　　這段字碼頁很容易理解，就是當button被點擊的時候，彈出一個"Hello World"，在離開的時候，在把div給顯示出來。JQuery裡的動畫，均可以用“slow”、“fast”和“normal”，當然你還可以設定相關的毫秒數。

　　3.bind()事件的對象

　　Handler這個回呼函數可以接受一個參數，當這個函數被調用時，一個JavaScript事件對象會作為一個參數傳進來。

　　這個事件對象通常是沒有必要且可以省略的參數，因為當這個事件處理函數綁定的時候就能夠明確知道他在觸發的時候應該做些什麼，通常就已經可以獲得充分的資訊了。然而在有些時候，在事件初始化的時候需要擷取