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

Question

我知道我可能在这里要求月亮，但我正在寻找一些经验丰富的意见，以了解在 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?

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

Answer 2

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