2011-09-15 23 views
2

好了,這是首選/右或什麼時候應該使用一個比其他,也帶來的好處/缺點使用以下;我應該使用在線或有線的事件處理程序

<a href="#" id="hypMyLink" onClick="myFunc();">a link</a> 

<script> 
    function myFunc(){ 
     //do something 
    } 
</script> 

或者......

<a href="#" id="hypMyLink">a link</a> 

<script> 
    $(function() { 
     $('#hypMyLink').click(function(e) { 
      //do something 
     });    
    }); 
</script> 

提前感謝!

回答

4

在標記的一個完美的世界 - 所有的事情都是語義,你會單獨您的標記,樣式和JavaScript在各自的文件。

它只是讓事情變得如此容易調試,並且在一個行業中,如果您經常知道您在尋找什麼,無論是事件,樣式還是標記,常常會更改

爲例:移動到CSS文件做所有我發現prethought增加了分離,你需要在以後的時間來選擇你的元素的樣式。

3

不顯眼的(即沒有嵌入在HTML標記的<script>標籤外部的JavaScript)是要走的路。爲什麼?有幾個原因:

它加強了關注點分離。爲什麼你的HTML關心行爲?

它使優雅降級/漸進增強可能。您可以根據用戶的瀏覽器實際允許的情況更加優雅地檢測和處理用戶交互。

它使得編輯和維護變得更加容易。不要在整個標記中搜索JavaScript引用進行編輯,而是將所有腳本都放在一個集中位置。

1

以前的答案嚴格地從問題分離的角度來處理問題,但也有一些很好的技術原因在JavaScript中有事件處理程序。在我看來,其中最主要的是你可以使用閉包來封裝事件處理程序所需的一些信息。

例如,假設您正在接收位置列表和佔位符,並且想要繪製 指向這些位置的鏈接列表,並在點擊該位置時彈出一個包含該位置名稱的警報彈出窗口。這是如何做到這一點的一個例子:

function alertGenerator(loc) { 
    return function() {alert("Hi, I'm visiting " + loc);}; 
} 

function createLocationList(locations, placeholder) { 
    // Create a jQuery wrapper for placeholder 
    var $placeholder = $(placeholder), 
    loc, 
    location, 
    $link; 
    // loop over the locations, create a link for each iteration 
    for (var loc in locations) if locations.hasOwnProperty(loc) { 
    location = locations[loc]; 
    $link = $("<a>"); 
    $link.text(location).click(alertGenerator(location)); 
    $placeholder.append($link); 
    }  
} 

如果你要嘗試使用onclick屬性來做到這一點,你會遇到兩個大問題。首先,你會主要處理字符串,而不是實際的函數和DOM元素(或jQuery對象)。根據我的經驗,這種代碼難以調試。其次,如果要參數化onclick中的函數調用,那麼該參數必須是全局的,以便它在回調中位於範圍內。

+1

歡迎除以上兩個答案... thx – Dooie

相關問題