關於jQuery與Javascript的事件綁定

如下屬於當時的牢騷，想看正文的能夠忽略，goto label:正文。

在jQuery裏摸爬滾打了一陣子後，感受對JQ也算是比較來電了，誰知，今天遇到一件事，感受仍是有點力不從心，所以特地在此處記下來。  事情是這樣滴：我在作一個鼠標移上去執行某個動做的操做。固然，這確定是用mouseover事件，結果該執行的代碼沒有執行，本着懶人的態度，我沒有去詳細分析緣由，猜想應該是 DOM是後加載過來的，那麼幹脆直接用bind算了，bind一個應該沒有問題吧，結果還不行，因而我就暈了。迫不得已之下，只能百度（不要拍我，我也想用google,不過實在是太慢了，有時候搜到了還打不開），關鍵詞是這樣的「jQuery 綁定事件失效」。結果我搜到了通常關於live方法的文章。文章太長了，又有代碼，很差理順了，繼續懶人，直接翻一下手冊，看看live。結果發現正好合適，live能夠想像成bind的bind的（固然實際上不是），因而用了一下，果真能夠了。高興之餘，記錄之。

正文：

先看看Javascipt的事件綁定吧：

Javascipt的事件綁定
這個可使用一些DOM自帶的綁定方式：如


<a href="#" onclick="runthis()"></a>


若是您的JS代碼裏有對應的runthis方法，那麼這個就能夠執行了。


這麼用的好處是一目瞭然，看一下就知道點擊的話會執行哪一個方法，並且問題少，只要DOM在，這個事件就會被綁定；缺點是JS代碼和HTML混到一塊兒了。說白了就是耦合度過高，哪天不須要這個click事件了，要改html。


固然Javascipt也能夠直接在本身的代碼裏作綁定，但原理就和jQuery的同樣了，那麼幹脆直接說jQuery的事件綁定。

jQuery事件綁定

基礎綁定obj.click()

這個綁定是理解起來最簡單的事件綁定


手冊裏是這麼寫的


$("p").click( function () { $(this).hide(); });
這樣的話，點擊P後會隱藏掉本身。


這種狀況下，若是DOM一直沒有增長的話，徹底能應付。然而這個DOM是若是在頁面初始化的時候不存在後來又加進來的咋辦呢？


這時候就到了bind上場了。

稍微靈活點的事件綁定obj.bind('click',function(){})

這個稍微靈活一些，你能夠隨時執行這個方法，前提是隻要這個DOM在執行這段話的時候已經存在的，那麼你就能夠處理了，必定要記得哈，這個DOM存在以後才能綁。過了這個村就跟bind不要緊了。


$("p").bind("click", function(){
  alert( $(this).text() );
});
然而我這人又懶了，我不想在執行綁定的事件的時候看看這個DOM有了沒，我想開始的時候就加上它，何時有了這個DOM均可以執行就能夠了。


這時候NB的live出廠了。

NB的綁定事件的方法live

obj.live('click',function(){}); 這個看起來是和bind長的很像的，可是是bind的變種。書上說，這傢伙在無論當前DOM有沒有都行。也就是說後期你加入的DOM照樣能綁上！ $('.clickme').live('click', function() {   alert("Bound handler called."); }); 就像這樣，原來的時候你有一些class叫作clickme的能夠運行，執行完這句後有新加的clickme也行！