Javascript簡單綁定

我聽說JavaScript綁定是一種更有效的方法。我已經看過一些不同的例子，但只是感到困惑。Javascript簡單綁定

我在我的頁面上有一個onclick事件的鏈接，它調用了一個ajax函數。

<a href="#" 
    title="#" 
    onclick="ajax('links to a page','div_name','loading...');showdiv('div_name');"> 
    my link</a>

它工作正常，但是id喜歡學習如何綁定這個（或任何onclick事件）。據我所知，通過綁定，onclick事件將在頁面加載時加載，因此可能會使用戶體驗更好。如果我錯了，請隨時糾正我。任何幫助，將不勝感激。

來源

2011-05-04 Hatzi

你的意思是* onclick事件將在頁面加載時加載*？「加載事件」意味着什麼？ – Cheeso 2011-05-04 16:19:59

@Cheeso：我可能是錯的，但我認爲隨着頁面加載它將事件存儲在內存中準備激活，而不是在鏈接被點擊時運行查詢。這可以加快這一進程。 – Hatzi 2011-05-04 16:28:27

我很久以前就停止在我的html標籤中寫javascript了。用戶界面的複雜性不僅僅是微不足道的，當您在腳本中註冊事件而不是內聯時，它更加清潔和更好。當你瞭解這一點時需要注意的事情是事件代表團，它允許你在創建dom元素之前註冊事件。如果您要動態添加和刪除大量鏈接，事件委派可以幫助您編寫更簡單的代碼。 – morgancodes 2011-05-04 16:39:07

當人們提到你bind在JavaScript中在這種情況下，它們很可能是指jQuery的.bind()函數，而不是ECMAScript 5的Function.bind（ECMAScript 是 JavaScript ......基本上）。

正如@morgancodes在評論中暗示的那樣，你實際尋找的概念是事件委託。如果您想要了解如何在JavaScript中執行此操作，您需要查看PPK's DOM Events並瞭解如何在IE中規範化事件對象。這是很多工作，但最終值得。

在另一方面，如果你想現在更新的代碼，你可以使用許多JavaScript庫在那裏的一個應對正火爲您提供：

在jQuery中，例如，你可以綁定你點擊事件，你的鏈接在以下任何一種方式：

// Bind the event directly to the element. 
// Advantages: clear, quick (to code) 
// Disadvantages: not good for dynamically added links 
//    or in cases where you have a lot of links. 
$("your_link_selector").click(function() { /* do your stuff here */ }); 
// Alternate: 
$("your_link_selector").bind("click",function() { /* do your stuff here */ }); 

// Bind the event to the body and fire it when the selector matches. 
// Advantages: works with dynamic content, lots of links. 
// Disadvantages: slower than delegate when you have lots of live events. 
$("your_link_selector").live("click",function() { /* do your stuff here */ }); 

// Bind the event to the selected container elements 
// Fire the event when the event_selector matches. 
// Advantages: works with dynamic content, lots of links. 
// Disadvantages: There are disadvantages? ;-) 
$("your_container_selector").delegate("your_link_selector", 
             "click", 
             function() { /* do your stuff here */ });

任何其他JavaScript庫將有能力處理這個問題，以及 - 我避免爲了保持較短的後加入的例子。

來源

2011-05-04 17:55:59

看到你的例子後，我採取了jQuery的方法。結束了這樣的事情：$（'a.change_location'）。bind（「click」，function（）{ajax（'link'）}）;感謝您的幫助 – Hatzi 2011-05-05 11:45:52

快速的問題，我可以添加更多然後1班，即$（'a.red，藍色，橙色'）。綁定（所有去同一個地方）？注意：我嘗試了我的例子，它拍了第一個名字。 – Hatzi 2011-05-05 12:28:41

@Hatzi - 你可以。您只需使用有效的CSS選擇器'a.red，blue，orange'不是有效的CSS選擇器。 'a.red，a.green，a.blue'（或'.red，.green，.blue'）可以工作。 – 2011-05-05 19:17:43

那麼你可以使用JQuery來做到這一點。或者你可以這樣做：

window.onload = function() { 

    document.getElementById('yourlinkid').onclick = function() { 
    ajax('links to a page... // add rest of your code 
    } 

}

你需要添加一個id屬性到錨點。例如：

<a href="#" 
    title="#" 
    id="yourlinkid" 
    my link</a>

或者使用其他方法查找它。如果你包含一個外部腳本，那麼不需要window.onload事件，但我認爲，如果你包含在你的文檔的HEAD中，它是必需的。綁定的方法當然是一個更好的方式來做到這一點，我認爲。

來源

2011-05-04 16:18:32 planetjones

感謝您的幫助......我最終使用了jQuery ......發現它更容易實現。 – Hatzi 2011-05-05 11:47:59

的ID添加到a標籤：

<a href="#" id="linkID" title="#">my link</a>

在JavaScript中，可以將功能結合到一個事件是這樣的：

document.getElementById("linkID").onclick = function() { 
    ajax('links to a page','div_name','loading...'); 
    showdiv('div_name'); 
}

來源

2011-05-04 16:19:54

Javascript簡單綁定

回答

相關問題