添加事件侦听器的最佳实践（javascript、html）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6925146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
best practice on adding event listeners (javascript, html)
提问by OVERTONE
I know I may be asking for the moon here but I'm looking for some experienced opinons on the best way to add event listeners or rather 'When' or 'Where' to add them in the js file.
我知道我可能会在这里问月亮，但我正在寻找一些关于添加事件侦听器的最佳方式的有经验的意见，或者更确切地说是“何时”或“在哪里”将它们添加到 js 文件中。
Take my take as an example. I have a page which has a bunch of onclick events that now have to be handled by properties in the JS file
以我的为例。我有一个页面，它有一堆 onclick 事件，现在必须由 JS 文件中的属性处理
eg
例如
var test = document.getElementById("i-am-element");
test.onclick = testEventListener;
My question is where exactly I should add this in the js file.
我的问题是我应该在 js 文件中的哪个位置添加它。
How I was planning to go about it was to have something like the following
我打算如何去做是有如下内容
$(document).ready(function() {
var test = document.getElementById("test-me-shane");
test.onclick = testEventListener;
//add all the functions to different elements
});
myfunction1(){}
myfunction2(){}
myfunction3(){}
So that once the document is ready, only then are all the event listeners added. Is this acceptable or is there are more universally accepted way of doing it.
因此，一旦文档准备就绪，所有事件侦听器才会添加。这是可以接受的还是有更普遍接受的方法。
NOTE: I know this question may appear subjective so I'm going with the correct answer will be the most popular way you've seen seen event listeners added. I'm sure there must be a majority acceptance on this and I apologize in advance if its similiar to something like where you should declare variables, at the start or when you need them.
注意：我知道这个问题可能看起来很主观，所以我会给出正确的答案，这将是您看到添加的事件侦听器最流行的方式。我确信必须有多数人对此表示接受，如果它类似于您应该在开始时或需要时声明变量的位置，我提前道歉。
In Java, should variables be declared at the top of a function, or as they're needed?
回答by Matt
You really want to be able to add all your event listeners in the same place; why? Simply for ease-of-maintenance.
您真的希望能够在同一位置添加所有事件侦听器；为什么？只是为了便于维护。
Because of this, the best place to put all your event listeners is in a place where you can guarantee allelements you'll possibly want to bind event handlers to are available.
因此，放置所有事件侦听器的最佳位置是可以保证您可能希望将事件处理程序绑定到的所有元素都可用的位置。
Thisis why the most common place to bind your event handlers is after the DOMReadyevent has fired $(document).ready().
这就是为什么绑定事件处理程序最常见的地方是在DOMReady事件触发之后$(document).ready()。
As always, there aresome exceptions to the rule. Very occasionally, you might want to bind an event handler to an element as soonas it is available; which is after the closing tag of the element has been defined. In this instance, the following snippet should be used:
与往常一样，该规则也有一些例外。很偶然，你可能要绑定一个事件处理程序的元素，尽快，因为它是可用的; 这是在元素的结束标记被定义之后。在这种情况下，应使用以下代码段：
<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>
The other thing you should consider is how you are going to bind your handlers. If you stick to: DOMElement.onclick = function () { };, you're limiting yourself to binding on handler per event.
您应该考虑的另一件事是如何绑定处理程序。如果你坚持：DOMElement.onclick = function () { };，你就会限制自己绑定每个事件的处理程序。
Instead, the following approach allows you to bind multiplehandlers per event:
相反，以下方法允许您为每个事件绑定多个处理程序：
function bind(el, evt, func) {
if (el.addEventListener){
el.addEventListener(evt, func, false);
} else if (el.attachEvent) {
el.attachEvent('on' + evt, func);
}
}
回答by Giuseppe Di Federico
Is there a specific reason why you don't simply specify the association when you declare the element in the html <someTag id="i-am-an-element" onclick="functionToTheEventToExecute()"> </someTag>
I guess so.
当您在 html 中声明元素时，是否有特定的原因不简单地指定关联，<someTag id="i-am-an-element" onclick="functionToTheEventToExecute()"> </someTag>
我猜是这样。
