添加事件侦听器（javascript、html）的最佳实践

我知道我可能会在这里问月亮，但我正在寻找一些有经验的意见，关于添加事件侦听器的最佳方法，或者更确切地说，在js文件中添加事件侦听器的“时间”或“地点”

以我的为例。我有一个页面，其中有一堆onclick事件，现在必须由JS文件中的属性来处理

乙二醇

我的问题是我应该在js文件中的什么位置添加这个

我本来打算做的就是做如下的事情

$(document).ready(function() {
    var test = document.getElementById("test-me-shane");
    test.onclick = testEventListener;

    //add all the functions to different elements
});

myfunction1(){}
myfunction2(){}
myfunction3(){}

因此，文档准备好后，才添加所有事件侦听器。这是可以接受的，还是有更普遍接受的方法

注意：我知道这个问题可能是主观的，所以我会选择正确的答案，这将是你见过的最受欢迎的方式。我确信这一点必须得到大多数人的认可，如果这与您应该在开始时或需要时声明变量的位置类似，我提前表示歉意

---

在html中声明元素时不简单地指定关联有什么具体原因吗我想是的

您确实希望能够在同一位置添加所有事件侦听器；为什么？只是为了便于维护

因此，放置所有事件侦听器的最佳位置是可以保证所有可能要绑定事件处理程序的元素都可用的位置

这就是为什么绑定事件处理程序的最常见位置是在

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>

---

不确定你是否会得到月亮，但要研究活动授权。如果问题无法回答是否有正确的方式，也许有人可以让我知道我的方式是否错误？我写了一篇关于活动授权的博客文章，这是我教自己的方式，可能对你有帮助，在这里，你不应该以这种方式约束活动！“不引人注目的Javascript”？显然，它被视为嵌入式Javascript，我今天才学到这一点。要求所有事件都作为属性处理在JS文件中，而不是在HTML中。除此之外，我对onclick没有任何问题。不，不要按照我说的去做，这只是对你的问题的澄清，Matt是对的+1，即使你解决了你的具体问题，你最终还是混合了html和js，只有在必要的时候才这样做，因为这是一个糟糕的做法。有趣的是，AngularJS的时代改变了JavaScript开发人员今天对突兀代码的反应方式。他们现在很容易地使用

ng click

s、

ng submit

s、使用自定义属性指向函数（

&

）的指令，这些指令将HTML与行为混合在一起（有时很难维护）。这似乎不再是个问题了。。。但是，举一个简短的例子，用

onclick

就可以了，你不应该以这种方式绑定事件！也许在我接受这个正确答案之前，我应该研究一下处理者是什么。要不然这就对了。啊，没关系。我知道什么是训练员。只是不知道他们叫什么：3

<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>

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