使用OnClick =或腳本附加事件監聽器

雖然已經有人問到，但我想解決正確的jQuery編程問題。使用OnClick =或腳本附加事件監聽器

方法1：

<script> 
    function DoClickAction() { 
      // Some work 
      return false; 
    } 
</script> 

<a href="#" id="ActionButton" onclick="DoClickAction();">Do some work</a>

方法2：

<script> 
    $(function() { 
      $("#ActionButton").on("click", DoClickAction); 
    } 

    function DoClickAction() { 
      // Some work 
      return false; 
    } 
</script> 

<a href="#" id="ActionButton">Do some work</a>

我有我的這個同事，我的意見的討論是，這兩種方法有足夠的親和不能說「這是正確的方式」，但如果我必須選擇我傾向於更喜歡方法＃1，這就是爲什麼：

層

方法1的優點：

當調試別人的代碼，你可以輕鬆地跟蹤它的jQuery代碼，當有人按下鏈接被執行。
當你動態加載（AJAX調用）的內容時，它會一直工作，不需要重新綁定你的jQuery事件。

方法＃2的優點：

它會產生更少的HTML代碼的瀏覽器下載，因爲該腳本文件將被緩存和onclick屬性是沒有必要的。雖然這個例子使用更多的代碼。
雖然使用帶1個函數的onclick可以使用相同的屬性，但可以輕鬆地重用代碼。

您對此有何看法？

來源

2013-08-29 ikwillem

方法1不jQuery的編程...它只是HTML和JavaScript。 –

沒有「jQuery編程」這樣的東西 –

使用jQuery（即方法＃2）連接你的事件允許一個更清晰的方法，允許你在HTML和JS之間區分你的顧慮，而不是將兩者混合在一起。它還允許您「集中」管理JS和相關聯的綁定（即在JS腳本文件中），而不必跟蹤通過HTML連接的事件。 –

而不是列出兩種方法的親的，讓我專注於CON方法1中的：

變化的函數名==改變整個標記
所有事件處理程序駐留在全球範圍。然後，使用閉包可能會有點痛苦。
動態添加新元素（通過JS或ajax響應）意味着您必須解析標記並逐個添加屬性，否則必須發送包含本質上JS函數調用的標記。不安全，不是清潔
每個屬性是一個新的偵聽器。您擁有的屬性越多，事件循環將變得越重
混合JS和HTML並不被認爲是好的做法。把它想象成分離的關注點。標記是爲了向客戶提供一個UI。 JS的工作（在瀏覽器中）是爲了增強用戶體驗。他們必須一起工作，但有不同的任務。因此，他們應該被視爲獨立的實體。

至於第二種方法去，唯一的「利弊」我能想到的是：

你的代碼稍微難以理解，但如果有人可以不知道是什麼一個事件監聽器是，他不應該在你的代碼上工作，IMO。
調試可以更難，和老的瀏覽器可能會泄露（JQ的確含有非常多的X-瀏覽器相關的代碼，因此它在這裏並不適用。當你寫vanillaJS它確實）

除此之外，method2還有另外專業專業版，您還沒有列出：代表團。起初，代表團看起來很難，但It's easy，jQuery的$.delegate使得它更容易，但仍然使用$.on with a selector也委託該事件。
基本上，代理允許您使用單個監聽器處理整個頁面或頁面的一部分的所有事件，例如click。這與將事件綁定到每個元素相反。因此：1個事件循環與數十個/數百個監聽器。很明顯哪個是更高效的做事方式。

假設你有一個頁面上的導航格，看起來像這樣：

<div id='nav'> 
    <ul> 
     <li id='nav-home'>Some pseudo-link</li> 
     <li id='nav-page1'>Another</li> 
    </ul> 
</div>

你想拿起用戶，點擊<li>標籤之一。你列出的第一種方法是正確的：<li id='nav-home' onclick='clickNav(event, this)'>。我通過事件對象和this（一個DOM參考）來訪問委派給我訪問的所有內容。
使用代表團，我可以簡單地這樣做：

//jQ 
$('#nav').on('click','li',function(e) 
{ 
    $.ajax({//you know the gist 
     url: 'ajax/' + $(this).id().replace('nav-',''), 
     success: function(){} 
    }); 
}); 
//vanillaJS: 
document.getElementById('nav').addEventListener('click',function(e) 
{ 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
    if (e.tagName.toLowerCase() === 'li') 
    { 
     //perform ajax call 
    } 
},false);

來源

2013-08-29 09:33:48

感謝您的回答，雖然沒有那些騙局:)你已經讓我信服。 – ikwillem

@Willem：我知道你可能沒有看到你需要了解vanillaJS，但對於這樣的事情來說，這確實是值得的。 JS是一種很好的小語言，DOM API有點笨拙，但不要讓你失望。一旦你瞭解了關閉和事件代表團，你會很高興看到JS本身。（對不起，幫不了忙，但我覺得好像jQ經常被用到） –

我自己非常偏袒＃2，因爲它提供了一個清晰的JavaScript和HTML分離。沒有按鈕動作的消極因素可以立即在HTML中可見，這可以被瀏覽器插件完全否定。另外，正如你已經說過的，有時候我想爲表格的每一行添加一個onclick事件，並且在每一行上設置一個元素的OnClick屬性比僅僅附加一個元素要浪費得多點擊處理程序給他們每個人在其他地方用一行代碼。

來源

2013-08-29 09:27:33

感謝您的回答，就像Mark Erasmus所說的，對您來說，這完全是關於javascript/jquery代碼和html的清晰分離。 – ikwillem

使用OnClick =或腳本附加事件監聽器

回答

相關問題