添加事件监听器的最佳做法（javascript，html） [英] best practice on adding event listeners (javascript, html)
问题描述
以我的身分为例。我有一个页面，其中有一堆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;
//添加所有不同元素的功能
}）;
myfunction1（）{}
myfunction2（）{}
myfunction3（）{}
所以一旦文档准备就绪，只有这样才能添加事件侦听器。这是可以接受的还是有更普遍接受的方法。
注意：我知道这个问题可能会是主观的，所以我正确的答案将是你看过的最受欢迎的方式是看到事件听众添加。我确信必须有大多数人接受这一点，如果它类似于你应该声明变量的那些类似的东西，那么在开始时或者你需要的时候，我们就提前道歉。
您真的希望能够将所有的事件侦听器添加到同一个地方;为什么？简单易用的维护。
因此，放置所有活动监听器的最佳位置是您可以保证所有元素可能需要的位置绑定事件处理程序可用。
这个是为什么绑定事件处理程序最常见的地方是在$ code之后> DOMReady 事件已触发 $（document）.ready（）。
与往常一样，是规则的一些例外。偶尔，您可能希望尽可能快地将事件处理程序绑定到元素 ;在元素的关闭标签被定义之后。在这种情况下，应该使用以下代码片段：
< div id =arbitrary-parent>
< h1 id =任意元素>我需要一个绑定到我的事件处理程序< strong>立即！< / strong>< / h1>
< script> document.getElementById（arbitrary-element）。onclick = function（）{alert（clicked）; }< /脚本>
< / 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）;
}
}
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.
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
eg
var test = document.getElementById("i-am-element");
test.onclick = testEventListener;
My question is where exactly I should add this in the js file.
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?
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 all elements you'll possibly want to bind event handlers to are available.
This is why the most common place to bind your event handlers is after the DOMReady event has fired $(document).ready().
As always, there are some exceptions to the rule. Very occasionally, you might want to bind an event handler to an element as soon as is is available; which is after the closing tag of the element has been defined. In this instance, the follow 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.
Instead, the follow approach allows you to bind muliple handlers per event:
function bind(el, evt, func) {
if (el.addEventListener){
el.addEventListener(evt, func, false);
} else if (el.attachEvent) {
el.attachEvent('on' + evt, func);
}
}
这篇关于添加事件监听器的最佳做法（javascript，html）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
