Question

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

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

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

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

Answer 1

嗯，你可以使用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中包含它则是必需的。我认为绑定方法当然是一种更简洁的方法。

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

Answer 3

当人们在此上下文中使用JavaScript引用bind时，他们很可能是指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库都能够处理这个问题 - 我避免添加示例以保持帖子更短。

Javascript简单绑定

3 个答案: