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

我知道我可能会在这里请求月亮，但我正在寻找一些有经验的意见，以最好的方式添加事件监听器，或者更确切地说'When'或'Where'将它们添加到js文件中。添加事件监听器的最佳实践（javascript，html）

以我的看法为例。我有有一堆，现在必须由性能在JS文件处理的onclick事件的页面

如

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?

来源

2011-08-03 OVERTONE

不知道你会得到月亮，但研究有关事件代表团。 – Kumar

那么如果这个问题不能得到回答，是否有正确的方法来做到这一点，也许有人可以让我知道我的方式是错的？ – OVERTONE

我写了一篇关于事件代表团的博客文章，这是我自学的方式可能对你有所帮助，这里是http://www.kumarchetan.com/blog/2010/10/03/event-delegation-save-你的网页/， – Kumar

你真的希望能够将所有的事件监听器添加到同一个地方;为什么？只是为了便于维护。

因此，放置所有事件侦听器的最佳位置是在一个地方，您可以保证全部元素您可能想要绑定事件处理程序以使其可用。

这就是绑定你的事件处理程序中最常见的地方是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() { };，你限制自己绑定每个事件的处理程序。

相反，后续的方法允许你绑定每个事件muliple处理程序：

function bind(el, evt, func) { 
    if (el.addEventListener){ 
     el.addEventListener(evt, func, false); 
    } else if (el.attachEvent) { 
     el.attachEvent('on' + evt, func); 
    } 
}

来源

2011-08-03 11:00:55 Matt

也许我应该在接受这个正确答案之前先看看处理程序是什么。否则，这是现货。 – OVERTONE

啊没关系。我知道处理者是什么人。只是不知道他们被称为：3 – OVERTONE

有为什么当你在HTML
<someTag id="i-am-an-element" onclick="functionToTheEventToExecute()"> </someTag>
我想是声明元素，你不要简单地指定相关联的具体原因。

来源

2011-08-03 10:40:41

你不应该这样绑定事件！ – Kumar

+11

“** Unobtrusive Javascript **”？ – Matt

显然它算作嵌入式JavaScript，今天我只学习它。它要求将所有事件作为JS文件中的属性进行处理，而不是在HTML中进行处理。除此之外，我对onclick没有任何问题。 – OVERTONE

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

回答

相关问题