添加事件监听器的最佳实践（javascript、html）

Posted 2023-03-05

【中文标题】添加事件监听器的最佳实践（javascript、html）

【英文标题】：best practice on adding event listeners (javascript, html)

【发布时间】：2011-10-19 00:04:12

【问题描述】：

我知道我可能在这里要求月亮，但我正在寻找一些经验丰富的意见，以了解在 js 文件中添加事件侦听器的最佳方式，或者更确切地说是“何时”或“何处”将它们添加到 js 文件中。

以我的观点为例。我有一个页面有一堆 onclick 事件现在必须由 JS 文件中的属性处理

例如

var test = document.getElementById("i-am-element");
test.onclick = testEventListener;

我的问题是我应该在 js 文件中的哪个位置添加它。

我打算这样做是有类似以下的东西

$(document).ready(function() 
    var test = document.getElementById("test-me-shane");
    test.onclick = testEventListener;

    //add all the functions to different elements
);

myfunction1()
myfunction2()
myfunction3()

这样一旦文档准备好了，所有的事件监听器才会被添加。这是可以接受的还是有更普遍接受的方法。

注意：我知道这个问题可能看起来很主观，所以我会选择正确的答案，这将是您看到添加事件侦听器的最流行的方式。我确信这必须得到多数人的认可，如果它类似于你应该在开始时或需要它们时声明变量的地方，我提前道歉。

In Java, should variables be declared at the top of a function, or as they're needed?

【问题讨论】：

不确定你是否会得到月球，但研究一下事件委托。

好吧，如果这个问题无法回答是否有正确的方法，也许有人可以让我知道我的方法是否错误？

我写了一篇关于事件委托的博文，这是我自学的方法可能对你有帮助，这里是kumarchetan.com/blog/2010/10/03/…，

【参考方案1】：

您真的希望能够将所有事件侦听器添加到同一个位置；为什么？只是为了便于维护。

因此，放置所有事件侦听器的最佳位置是您可以保证所有您可能想要绑定事件处理程序的元素都可用的地方。

这就是绑定事件处理程序的最常见位置是在DOMReady 事件触发$(document).ready() 之后的原因。

与往常一样，有规则有一些例外。有时，您可能希望尽快 将事件处理程序绑定到可用的元素；这是在元素的结束标签被定义之后。在这种情况下，应使用以下 sn-p：

<div id="arbitrary-parent">
    <h1 id="arbitrary-element">I need an event handler bound to me <strong>immediately!</strong></h1>
    <script>document.getElementById("arbitrary-element").onclick = function ()  alert("clicked"); </script>
</div>

您应该考虑的另一件事是您将如何绑定您的处理程序。如果您坚持使用：DOMElement.onclick = function () ;，那么您将限制自己绑定到每个事件的处理程序。

相反，以下方法允许您为每个事件绑定 多个 处理程序：

function bind(el, evt, func) 
    if (el.addEventListener)
        el.addEventListener(evt, func, false);
     else if (el.attachEvent) 
        el.attachEvent('on' + evt, func);
    

【讨论】：

也许我应该先看看处理程序是什么，然后再接受这个作为正确答案。否则这是正确的。

啊，没关系。我知道什么是处理程序。只是不知道他们叫什么：3

【参考方案2】：

在html中声明元素时不简单指定关联是否有特定原因<someTag id="i-am-an-element" onclick="functionToTheEventToExecute()"> </someTag>我猜是这样。

【讨论】：

你不能这样绑定事件！

"不显眼的 javascript"?

显然它算作嵌入式javascript，我今天才学习这个。它要求所有事件都作为属性处理在 JS 文件中，而不是在 HTML 中。除此之外，我对onclick没有任何问题。

不，不要按我说的，这只是对你的问题的澄清，Matt是对的+1，即使你解决了你的具体问题，你最终还是要混合html和js来做仅在必要时才这样做，因为这是一种不好的做法。

有趣的是，AngularJS 时代如何改变了当今 JavaScript 开发人员对突兀代码的反应方式。他们现在很容易使用ng-clicks、ng-submits、利用自定义属性指向函数（&）的指令，这些东西将 HTML 与行为混合在一起（有时很难维护）。这似乎不再是问题了...但是以onclick 为例，然后 - 你去 - 你不能以这种方式绑定事件！