Fatal编程技术网
  • javascript/
  • Javascript：注册事件处理程序的最佳位置

Javascript：注册事件处理程序的最佳位置

javascript html events jquery

Javascript：注册事件处理程序的最佳位置,javascript,html,events,jquery,Javascript,Html,Events,Jquery,这个问题是如此的基本，我确信这一定是某个东西的复制品，尽管我已经做了 我的问题基本上是：最初为HTML元素注册事件处理程序的最佳位置在哪里 注册事件处理程序的最简单方法显然是内联执行： <div id = "mybutton" onclick = "doSomething()">Click me</div> 点击我 但这与现代web开发中逻辑和内容分离的势不可挡的趋势背道而驰。因此，在2012年，所有逻辑/行为都应该在纯Javascript代码中完成。这太棒了，它会带

这个问题是如此的基本，我确信这一定是某个东西的复制品，尽管我已经做了

我的问题基本上是：最初为HTML元素注册事件处理程序的最佳位置在哪里

注册事件处理程序的最简单方法显然是内联执行：

<div id = "mybutton" onclick = "doSomething()">Click me</div>

点击我
但这与现代web开发中逻辑和内容分离的势不可挡的趋势背道而驰。因此，在2012年，所有逻辑/行为都应该在纯Javascript代码中完成。这太棒了，它会带来更多可维护的代码。但您仍然需要一些初始挂钩，将HTML元素与Javascript代码挂钩

通常，我只是做一些类似的事情：

<body onload = "registerAllEventHandlers()">
但是。。。这仍然是“作弊”，不是吗？因为我们仍然在使用内联Javascript。但我们还有什么其他选择呢？我们无法在
部分的
标记中执行此操作，因为此时我们无法访问DOM，因为页面尚未加载：

<head>
<script type = "text/javascript">
    var myButton = document.getElementById("mybutton"); // myButton is null!
</script>
</head>


var myButton=document.getElementById（“myButton”）；//我的按钮是空的！
我们是否在页面底部放置
标签或其他东西？比如：

<html>
<body>
...
...
<script type = "text/javascript">
   registerAllEventHandlers();
</script>
</body>
</html>


...
...
注册Leventhandler（）；
这里的最佳做法是什么？

您可以使用
窗口。onload
：

<script type = "text/javascript">
  window.onload = registerAllEventHandlers;
</script>
使用
onload
是有效的，因为它会立即注册
onload
事件，但会在DOM准备就绪时触发它。

我不得不这样做，但通常是关于JavaScript的。但是想法仍然是一样的——在关闭主体之前加载脚本

利用提取
窗口.onload
和DOM就绪事件的库。这样，您可以在DOM准备就绪后立即加载脚本。

您应该在DOM准备就绪后立即注册事件处理程序。在所有浏览器中检测到这一点并不总是容易的，尽管IE 8（及更早版本）是一个显著的例外，但现在最广泛使用的浏览器都支持这一事件（感谢您在评论中指出这一点）

这本质上相当于在
正文
末尾调用
RegisteralLevenHandler
函数，但它的优点是不需要向HTML添加任何JavaScript

这比使用
window.onload要好得多，因为只有在加载了页面的所有资产（图像、CSS等）之后才会执行

如果您使用的是一个主要的JavaScript框架，那么您可以很容易地检测DOM何时准备就绪，即使在旧版本的IE中也是如此。使用jQuery您可以使用：

或速记：


jQuery(function() { … });


使用Prototype您可以使用：


就个人而言，我在向元素添加
onlclick=“doSomething（）；”
方面没有问题。没有逻辑，只是一个函数调用

所有逻辑都在它应该在的地方：在
头中定义的函数中
或一个单独的文件中


告诉我，当你将
href=“somepage.html”
甚至
href=“somepage.html”someanchor“
添加到一个A标签时，会有什么区别。
我很少发现我只有一个链接需要一些行为；通常是一组类似的链接。当行为改变或不再需要时，我发现更改或删除一个定义行为并将其附加到相关链接的
.js
文件更方便，与其更改或删除许多链接上的许多
属性，还不如单击
href
属性。@georgebrock如果您想重命名/重新构造HTML文件，您可以这样说-您仍然需要转到每个
A
标记并更改
href
属性。无论如何，在您的情况下，不需要更改函数名，只需重新编写函数即可。如果onclick的行为正在改变，那么可能值得将函数名更改为其他名称。不过，你说得很对。一旦一个网站在公共网站上，更改
href
属性将是一件令人头痛的事，因为（当它们必须更改时，它们应该转到新的位置）。但我离题了。既然您可以编写JavaScript，这样就有一个单一的更改点和清晰的关注点分离，为什么不这样做呢？如果您所更改的只是函数中的代码，那么使用内联onclick仍然可以有一个单一的更改点。至于为什么不分离事件处理程序：HTML的可读性——你不能仅仅通过查看HTML来判断按钮（例如）会做什么，因为行为是在一个单独的文件中定义的。也许我们只是来自不同的开发风格：我总是想要一个指向真实URL的链接和一个提交真实表单的按钮。如果我添加的链接或按钮在没有JavaScript的情况下不起作用，那么我会使用JavaScript将其添加到页面中。-1：
窗口。onload
事件并不等同于使用jQuery的
ready
事件：
窗口。onload
将在页面完成加载后触发，包括所有外部资源（图像、CSS等）而jQuery的
ready
事件将在HTML完成加载后但在外部资源之前触发。使用
window.onload
是一个坏主意，因为在很多情况下（很多图像、连接速度慢等），JavaScript事件很长时间都不会被注册。@slebetman：你能详细说明为什么在加载图像（等）之前附加JS事件处理程序是愚蠢的，并且理解两种不同技术之间的差异吗？在一个旨在学习和共享信息的网站上，说“那太蠢了”的评论不是很有建设性。几乎所有浏览器都加载了DOMContents，但IEI不知道现在它得到了如此广泛的支持，我想我已经习惯了用jQuery来帮我。谢谢@gengkev

jQuery(document).ready(function () {
    // Your initialisation code here
});



jQuery(function() { … });



document.observe("dom:loaded", function() {
    // Your initialisation code here
});