添加事件监听器的最佳实践(javascript,html)

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(){}

因此,一旦文档准备就绪,只有这样才能添加所有事件监听器.这是可以接受的还是有更普遍接受的方式.

注意:我知道这个问题可能看似主观,所以我正确的回答将是你看到的事件听众添加的最流行的方式.我肯定必须得到多数人的接受,如果它类似于你应该在开始时或需要时声明变量的地方,我会事先道歉.

在Java中,变量应该声明在函数的顶部,还是需要它们？

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