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简单绑定

回答

相关问题