使用jQuerys的document.ready功能附加事件元素

普通樣式使用jQuerys的document.ready功能附加事件元素

<a href="#" id="myLink" onclick="myFunc();">click me</a> 

function myFunc() { 
    alert('hello!'); 
}

jQuery的風格

<a href="#" id="myLink">click me</a> 

$(document).ready(function() { 
    $("#myLink").click(function() { 
     alert('hello!'); 
    }); 
});

我使用jQuery剛剛起步，但我想知道什麼這兩者的區別在於。我應該更喜歡jQuery方法嗎？這樣做有什麼好處嗎？

Imho我不喜歡用jQuery方法閱讀html時，不知道鏈接是幹什麼的。我發現jQuery attach方法在附加到多個元素時非常有用（例如，$("#myTable tr").click(function(e) {...});），但是在處理單個元素時，我不知道應該使用哪個元素。

來源

2010-07-01 fearofawhackplanet

*」閱讀與jQuery的方法的HTML時，有沒有線索，以什麼鏈接確實。「*您可以隨時使用評論，或更好地使用描述性ID和類。 'myLink'不會說太多，但是'helloLink'可以得到重點。 – user113716 2010-07-01 14:58:41

我在寫這篇文章後不久就意識到，當我注意到我的鏈接的ID與它所調用的函數名稱完全相同時:) – fearofawhackplanet 2010-07-01 15:23:47

我喜歡第二種方法，原因有幾個。

它保留所有的JavaScript的東西在一個地方;你是對的，當你閱讀HTML時，你不知道點擊鏈接會做什麼，但另一方面是，如果你定義了事件處理程序內聯，那麼當你閱讀JavaScript時，你不知道什麼時候函數將被調用。我喜歡儘可能將我的「圖層」分開。
它促進有時稱爲「unobtrusive javascript」，以及優雅的退化您的應用程序。優雅退化（或「漸進式增強」）的理念是，您將鏈接設置爲一個真正的鏈接，它將轉到一個單獨的頁面，但是您使用javascript來劫持click事件，並且在不離開頁面的情況下提供相同的功能。這樣，如果用戶沒有JavaScript（假設他們是使用屏幕閱讀器的禁用用戶），該應用程序仍然有效。
它使javascript更可重用;說我定義的元素綁定我的事件處理程序基於通用的，如CSS類。然後，我可以將該javascript放到各種頁面上，並讓它「只是工作」。例如，我一直在做這個事情，比如自動保存。

來源

2010-07-01 14:54:33

JQuery的的處理事件的方式被定義不顯眼（http://en.wikipedia.org/wiki/Unobtrusive_JavaScript），並且通常優於「標準」的方式，因爲你必須邏輯和表示之間的明確分離，並且通常代碼更可重複使用的。

更不用說JQuery（但其他庫也有相同的功能）爲您處理瀏覽器不一致問題。

來源

2010-07-01 14:59:28 mamoo

我知道你的關注，因爲我有一個類似的問題，並決定使用Jquery和命名空間來綁定JavaScript命名空間的事件。這就是我如何將事件掛鉤到單個元素以及將事件掛接到具有相同類或標記名的多個元素的方式。

基本上我命名我的點擊，懸停，鼠標懸停等事件，然後在我的document.ready中調用namespaced事件。原因是我可以從一個地方查看我的所有點擊，懸停，鼠標懸停事件。

<script type="text/javascript"> 

    var Page1 = { 
    Events: { 
     click: { 
     elementid: { 
      func: function(evt) { //where elementname is the id of your element 
      //your code here 
      }, 
      selector: "#someId" 
     } 
     elementclass: { 
      func: function(evt) { //where elementclass is the class of your element(s) 
      //your code here 
      }, 
      selector: ".someClass" 
     }, 
     mouseover: { 
     //similar to click namespace 
     }, 
     mouseout: { 
     //similar to click namespace 
     }, 
     .... 
    } 
    }; 

    $(document).ready(function() { 
    for (var key in Page1.Events) { 
     for (var eventKey in Page1.Events[key]) { 
     $(Page1.Events[key][eventKey].selector).bind(key, Page1.Events[key][eventKey].func); 
     } 
    } 
    }); 

</script>

現在關於這個的好處是，你只需添加事件到您的命名空間，他們將自動獲得在文件準備大呼過癮。你也可以用Live或委託替換$ .bind調用來掛鉤未來的dom元素。

來源

2010-07-01 15:05:51

Imho我不喜歡用jQuery方法閱讀html時，不知道鏈接是幹什麼的。

禁用JavaScript的瀏覽器不知道您的鏈接是幹什麼的。他們看到一個指向文檔頂部的鏈接！

其他的答案已經給你說出很多理由，以避免在你的HTML onclick風格事件......我也盡我所能，避免在我的HTML鏈接<a href="#">，確保文檔中的任何<a>標籤有一個目的。我會經常使用jQuery創建額外<a>標籤添加的功能只有瀏覽器將讓我來處理對他們的點擊事件

來源

2010-07-01 15:06:05 gnarf

使用jQuerys的document.ready功能附加事件元素

回答

相關問題