Javascript简单绑定答案

【问题标题】：Javascript simple bindingJavascript简单绑定
【发布时间】：2011-05-04 16:15:06
【问题描述】：

我听说 JavaScript 绑定是一种更有效的方法。我看过一些不同的例子，但只是感到困惑。

我的页面上有一个带有 onclick 事件的链接，该链接调用了一个 ajax 函数。

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

它工作得很好，但是我想学习如何绑定这个（或任何 onclick 事件）。据我了解，通过绑定，onclick 事件将在页面加载时加载，因此可能会使用户体验更好。如果我错了，请随时纠正我。任何帮助将不胜感激。

【问题讨论】：

onclick 事件将在页面加载时加载 是什么意思？ “加载事件”是什么意思？
@Cheeso：我可能是错的，但我认为当页面加载时它将事件存储在内存中准备激活，而不是在单击链接时运行查询。这可以加快进程。
我很久以前就停止在我的 html 标签中编写 javascript。如果 UI 的复杂性不那么简单，当您在脚本中注册事件而不是内联时，它是一种更简洁、更好的工作方式。在学习这方面需要注意的是事件委托，它允许您在创建 dom 元素之前注册事件。如果您要动态添加和删除大量链接，事件委托可以帮助您编写更简单的代码。

标签： javascript binding

【解决方案1】：

当人们在这种情况下在 JavaScript 中将您引用到 bind 时，他们很可能指的是 jQuery 的 .bind() 函数，而不是 ECMAScript 5 的 Function.bind（ECMAScript is JavaScript ...基本上）。

正如@morgancodes 在 cmets 中所建议的，您实际寻找的概念是事件委托。如果您想学习如何在 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 库也将能够处理这个问题——我避免添加示例以使帖子更短。

【讨论】：

看到您的示例后，我采用了 jQuery 方法。结束了这样的事情： $('a.change_location').bind("click", function() {ajax('link') });感谢您的帮助
快速问题，我可以一次添加超过 1 个类，即 $('a.red, blue, orange').bind（都去同一个地方）吗？注意：我尝试了我的示例，它显示了名字。
@Hatzi -- 你可以。您只需要使用有效的 CSS 选择器 a.red, blue, orange 不是有效的 CSS 选择器。 a.red, a.green, a.blue（或.red, .green, .blue）会起作用。

【解决方案2】：

给a标签添加一个ID：

<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');
}

【讨论】：

【解决方案3】：

您可以为此使用 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 中，则它是必需的。我认为绑定方法肯定是一种更简洁的方法。

【讨论】：

感谢您的帮助...我最终使用了 jQuery...发现它更容易实现。