html學習 - jquery事件監聽詳解

標籤：bind   live   click   

html學習 - jquery事件監聽詳解

• html學習 - jquery事件監聽詳解
  • 監聽方法
  • 監聽方法參數解釋
    • click參數
    • 事件自動執行問題解決
  • bind方法
  • live方法

監聽方法

在jquery裡，監聽的方法比較多，用的最多的就是簡單的.click() .onchange() .pressdown() 所以這樣很簡單啊，直接使用就好了，只要符合參數規範就可以了。除了這個還有bind() live() 方法。

而addEventListener()同bind()方法是沒有很大功能上的區別的，是因為bind()方法是jquery為瞭解決瀏覽器的相容性問題而建立的。

監聽方法參數解釋.click()參數

在簡單的監聽方法中例如.click()中，它的參數就只有一個回呼函數，可以：

$(selector).click(function)

其中selector是選取器這個東西在以前有講過， 然後我們舉一個簡單的例子：

$("button").click(function(){  $("p").slideToggle();});

這個就是在按鈕點擊的時候除法裡面的回呼函數，然後讓元素p隱藏的效果。

.bind()的方法我在下面會詳細解釋。

事件自動執行問題解決

這其中不管是簡單的事件監聽方法，還是.bind() .live()等等，都可能會遇到一個問題，就是會自動執行。在我們使用匿名回呼函數的時候不會遇到，但是在使用自己命名的回呼函數就會遇到，例子如下：

$(‘#createImageData‘).click(createImageDataPressed());function createImageDataPressed(event){    alert("click");}

這個代碼就會自動執行，即使不點擊id為createImageData的按鈕，這是因為在click()裡面的函數加了括弧
不添加括弧就不會出現這個問題如：$(‘#createImageData‘).click(createImageDataPressed); 這樣就不會出現自動執行的問題了。

bind()方法

.bind()方法其實並沒有和addEventListener在用法上有很大區別，使用方法為：

$(selector).bind(event,data,function)

event	必須填寫，說明綁定的事件類型
data	可選，用來規定傳遞到函數的額外資料
function	必須填寫，事件響應函數

例子如下：

$("button").bind("click",function(){    $("p").slideToggle();  });

然後.bind()方法還有另外一個使用方法。

$(selector).bind(event:function, event:function, ...);

這種用法就是給某個元素繫結多個事件，例子如下：

$("button").bind({    click:function(){$("p").slideToggle();},    mouseover:function(){$("body").css("background-color","red");},      mouseout:function(){$("body").css("background-color","#FFFFFF");}    });

此代碼來源：W3C

這裡要說一下，就是.bind()方法是只能對頁面上先載入的元素起作用，對於後來產生的元素是不可以的。所以這個時候就需要.live()了

live()方法

我們可以把.bind()和.live()看成同一個東西，不過.live()多了一個功能，是它可以對未來的元素，和馬上要產生的元素還有已經有的元素都起作用，這樣就會方便很多。

大致就以上了。

轉載請註明出處。

html學習 - jquery事件監聽詳解