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

StackOverflow https://stackoverflow.com/questions/34126

题

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

  1. 直接在标签内添加一个事件，如下所示：

    <a href="" onclick="doFoo()">do foo</a>

  2. 通过 JavaScript 设置它们，如下所示：

    <a id="bar" href="">do bar</a>

并在 a 中添加一个事件 <script> 里面的部分 <head> 部分或外部 JavaScript 文件中，如果您使用的是这样的 原型JS:

Event.observe(window, 'load', function() {
    $('bar').observe('click', doBar);
}

我认为第一种方法更容易阅读和维护（因为JavaScript操作直接绑定到链接），但它不是那么干净（因为即使页面没有完全加载，用户也可以点击链接，这可能会导致JavaScript错误在某些情况下）。

第二种方法更干净（当页面完全加载时添加操作），但更难知道操作是否链接到标签。

哪种方法最好？

一个杀手级的答案将不胜感激！

有帮助吗？

解决方案

根据我的经验，主要有两点：

1）最重要的是保持一致。我认为这两种方法不一定更容易阅读，只要你坚持下去。只有当这两种方法都在项目中使用时（或者在同一页面上使用更糟糕）时，我才会感到困惑，因为那时我必须开始搜索调用，并且不立即知道在哪里查找。

2）第二种，即 Event.observe() 当对多个事件采取相同或非常相似的操作时具有优势，因为当所有这些调用都在同一位置时，这一点变得显而易见。此外，正如康拉德指出的那样，在某些情况下，这可以通过一次调用来处理。

其他提示

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

我发现事实恰恰相反。请记住，有时多个事件处理程序将绑定到给定的控件。

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

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

这将事件处理程序连接到表中的所有列标题以使表可排序。想象一下使所有列标题可单独排序所需的努力。

我相信第二种方法通常是首选，因为它保留有关操作的信息（即JavaScript）与标记分开，就像 CSS 将表示与标记分开一样。

我同意这会使查看页面中发生的情况变得更加困难，但是像 firebug 这样的好工具将在这方面为您提供很大帮助。如果您将 HTML 和 Javascript 的混合保持在最低限度，您还会发现可以获得更好的 IDE 支持。

随着项目的发展，这种方法确实会发挥作用，并且您会发现想要将相同的 javascript 事件附加到许多不同页面上的一堆不同元素类型。在这种情况下，使用附加事件的单一步骤变得更加容易，而不必搜索许多不同的 HTML 文件来查找调用特定函数的位置。

您还可以使用addEventListener（不在IE 中）/attachEvent（在IE 中）。

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

这些允许您将一个函数（或多个函数）附加到现有 DOM 对象上的事件。它们还具有允许稍后解除连接的优点。

一般来说，如果您使用大量的 javascript，那么使您的 javascript 可读，而不是你的 html。所以你可以这么说 onclick=X html 中的内容非常清晰，但这既是代码缺乏分离的情况（各部分之间的另一种语法依赖关系），也是您必须同时阅读 html 和 javascript 才能理解页面的动态行为的情况。 。

我个人的偏好是在外部 js 文件中使用 jQuery，这样 js 就与 html 完全分离。Javascript 应该是不引人注目的，因此内联（即第一个示例）在我看来并不是真正的最佳选择。当查看 html 时，您使用 js 的唯一标志应该是脚本包含在 head 中。

附加（和处理）事件的示例可能是这样的

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（或另一个众所周知的库）完成艰苦工作的巨大好处是（很大程度上）解决了跨浏览器支持，这使生活变得更加轻松

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

所以你的实际选择是；

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top