Question

我知道我可能会在这里要求登月，但我正在寻找一些有关添加事件监听器的最佳方式的经验丰富的意见，或者更确切地说是“何时”或“何处”将它们添加到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()之后。

与往常一样，规则的一些例外。偶尔，您可能希望将事件处理程序尽快绑定到元素 ;这是在元素的结束标记之后定义的。在这种情况下，应使用以下代码段：

<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>声明元素时，是否有一个特定的原因，您不能简单地指定关联。我想是的。

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

2 个答案: