JavaScript中添加事件的最佳方法是什么？

Question

我看到在JavaScript中设置事件有两种主要方法：

1. 直接在标签内添加事件，例如：

   <a href="" onclick="doFoo()">执行foo函数</a>

2. 通过JavaScript设置事件，例如：

   <a id="bar" href="">执行bar函数</a>

你可以在部分的

- paulgreg

Answer 1

我认为第一种方法更易于阅读和维护。

但我发现相反的情况更为真实。请注意，有时候一个控件会绑定多个事件处理程序。

在一个中心位置声明所有事件可以帮助组织网站上正在进行的操作。如果需要更改某些内容，则不必搜索所有调用函数的地方，只需在一个地方进行更改即可。当添加更多应具有相同功能的元素时，您不必记住将处理程序添加到它们; 相反，通常足够让它们声明一个类，甚至根本不更改它们，因为它们在逻辑上属于容器元素，其所有子元素都被连接到一个动作。以下是实际代码：

$$('#itemlist table th > a').invoke('observe', 'click', performSort);

这将一个事件处理程序绑定到表格中的所有列标题，使得整个表格都可以进行排序。想象一下单独为每个列标题进行排序所需的工作量。

- Konrad Rudolph

Answer 2

根据我的经验，这里有两个关键点：

1）最重要的是保持一致性。我认为只要坚持使用其中一种方法，它们都不一定更易读。当一个项目中同时使用两种方法（甚至在同一页上）时，我会感到困惑，因为我必须开始搜索调用，并且不知道该去哪里查找。

2）第二种方式，即Event.observe()，在多个事件上执行相同或非常相似的操作时具有优势，因为当所有这些调用在同一个位置时，这变得很明显。此外，正如Konrad指出的那样，在某些情况下，可以通过单个调用来处理这些事件。

- La-Z

Answer 3

我认为第二种方法通常更受欢迎，因为它将操作信息（即JavaScript）与标记分开，就像CSS将演示文稿与标记分开一样。

我同意这使得在页面中看到发生了什么变得有点困难，但是像firebug这样的好工具将大大帮助您。如果尽量减少HTML和Javascript的混合使用，您还会发现更好的IDE支持可用。

当您的项目增长并且您发现想要将相同的javascript事件附加到许多不同的元素类型和许多不同的页面时，此方法真正发挥其作用。在这种情况下，拥有一个单一的地方来附加事件比必须搜索许多不同的HTML文件以查找特定函数被调用的位置要容易得多。

- Matt Sheppard

Answer 4

你也可以使用 addEventListener（不支持 IE）/ attachEvent（IE 支持）。

请查看：http://www.quirksmode.org/js/events_advanced.html

它们允许您将一个或多个函数附加到现有 DOM 对象上的事件。它们还具有允许稍后取消附加的优点。

一般来说，如果您正在使用大量的 JavaScript，将您的 JavaScript 代码编写得易读性更强，而不是您的 HTML 代码，会非常有用。因此，您可以说在 HTML 中使用 onclick=X 很清晰，但这既是代码分离的缺失，又是代码之间的另一种语法依赖，并且需要同时阅读 HTML 和 JavaScript 才能理解页面的动态行为。

- Tyler

Answer 5

像YUI和jQuery这样的库提供了在DOM准备就绪后添加事件的方法，这可以在window.onload之前完成。它们还确保您可以添加多个事件处理程序，以便您可以使用来自不同来源的脚本而不会相互覆盖。

因此，您的实际选择是：

一、如果您的脚本很简单，并且将是页面上唯一运行的脚本，请创建一个init函数，如下所示：

window.onload = function () {
    init();
}
function init() {
    // actual function calls go here
    doFoo();
}

二、如果您有许多脚本或计划从不同的来源混合使用脚本，请使用库及其onDOMReady方法来安全地添加事件处理程序。

- Flubba

Answer 6

我个人偏好于在外部js文件中使用jQuery，这样js代码就完全与html分离。Javascript应该是不显眼的，因此内联（即第一个示例）在我看来并不是最佳选择。当查看html时，唯一表明您正在使用js的迹象应该是head中的script包含。

附加（和处理）事件的示例可能如下所示：

var myObject = {

    allLinkElements: null,  

    init: function()
    {
        // Set all the elements we need
        myObject.setElements();

        // Set event handlers for elements
        myObject.setEventHandlers();
    },

    clickedLink: function()
    {
        // Handle the click event
        alert('you clicked a link');
    },

    setElements: function()
    {
        // Find all <a> tags on the page
        myObject.allLinkElements = $('a');

        // Find other elements...
    },

    setEventHandlers: function()
    {
        // Loop through each link
        myObject.allLinkElements.each(function(id)
        {   
            // Assign the handler for the click event
            $(this).click(myObject.clickedLink);
        });

        // Assign handlers for other elements...
    }
}

// Wait for the DOM to be ready before initialising
$(document).ready(myObject.init);

如果您想要保持所有js文件的组织方式，我认为这种方法是有用的，因为您可以为不同的任务使用特定的对象，而且一切都很好地封装在其中。

当然，让jQuery（或其他知名库）来完成复杂工作的巨大好处是跨浏览器支持（主要）已经处理好了，这使得生活变得更加轻松。

- harry.w