为什么不在 body 元素上使用 Javascript 处理程序？

发布于 2024-08-30 18:20:15 字数 735 浏览 6 评论 0原文

<body onLoad="document.getElementById('<id>').focus();">

Ben Scheirman 回复（无需进一步解释）：

任何 Javascript 书籍都会告诉你不是将处理程序放在 body 元素上像这样

这会被认为是不好的做法？在 Espos 的回答中，说明了“覆盖”问题。这是唯一的原因，还是还有其他问题？兼容性问题？

原文

As an answer to the question of 'How do you automatically set the focus to a textbox when a web page loads?', Espo suggests using

<body onLoad="document.getElementById('<id>').focus();">

Ben Scheirman replies (without further explanation):

Any Javascript book will tell you not
to put handlers on the body element
like that

Why would this be considered bad practice? In Espos answer, an 'override' problem is illustrated. Is this the only reason, or are there any other problems? Compatibility issues?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜吻♂芭芘 2024-09-06 18:20:15

使用 onLoad 变得越来越不常见，因为无法使用此方法堆叠回调，即新的 onload 定义会覆盖旧的定义。

在像 jQuery 及其 .load() 这样的现代框架中，回调可以堆叠，并且在同一页面上使用不同的脚本、插件等时不会发生冲突。

此外，将标记与代码分开是广泛认为的良好做法，因此即使有人想要使用 onload （如果您控制整个环境并知道自己在做什么，这是完全可以的）做）可以将该事件附加到脚本端的 head 或单独的 javaScript 文件中：

window.onload = function() { document.getElementById...... }

Using onLoad is becoming less and less common because callbacks can't be stacked using this method, i.e. new onload definitions override the old ones.

In modern frameworks like jQuery and its .load(), callbacks can be stacked and there are no conflicts when using different scripts, plugins, etc. on the same page.

Also, it is widely regarded good practice to keep the markup separate from the code, so even if one would want to use onload (which is perfectly okay if you control the complete environment and know what you're doing) one would attach that event on the scripting side either in the head or a separate javaScript file:

window.onload = function() { document.getElementById...... }

回复收藏 0 原文

回忆追雨的时光 2024-09-06 18:20:15

在元素中使用 onload 属性没有任何问题，前提是：

您可以完全控制页面，
当前页面上没有使用其他脚本，或者将来可能会尝试在 body 元素或 window 对象上设置一个 onload 处理程序，
您知道自己的想法，并且很高兴在其中包含一小段脚本你的加价。

还值得注意的是是正式标准 (HTML 4) 的一部分，而 window.onload 则不是，尽管它已在许多年前的所有主要浏览器中实现。

回复收藏 0 原文

独木成林 2024-09-06 18:20:15

暂时忽略内联事件处理程序属性是否错误的问题，onload 事件不是放置自动对焦器的好地方，因为它仅在加载整个页面（包括图像）时触发。

这意味着用户将不得不等待更长时间才能发生自动对焦，并且如果页面需要相当长的时间才能加载，他们可能已经将注意力集中在浏览器页面（或 chrome，例如地址栏）上的其他位置，只是为了找到他们的打字中途焦点被盗。这非常令人恼火。

自动对焦是一种潜在的敌意功能，应谨慎且礼貌地使用。其中一部分是减少聚焦之前的延迟，最简单的方法是直接在元素本身之后添加脚本块。

<input id="x">
<script type="text/javascript">
    document.getElementById('x').focus();
</script>

Disregarding the issues of whether inline event handler attributes are a wrongness for a moment, the onload event is a poor place to put an autofocuser, since it only fires when the whole page is loaded, including images.

This means the user will have to wait longer for the autofocus to occur, and if the page takes quite a while to load they may already have focused elsewhere on the browser page (or chrome, such as the address bar), only to find their focus stolen halfway through typing. This is highly irritating.

Autofocus is a potentially-hostile feature that should be used sparingly and politely. Part of that is reducing the delay before focusing, and the easiest way to do that is a script block directly after the element itself.

<input id="x">
<script type="text/javascript">
    document.getElementById('x').focus();
</script>

回复收藏 0 原文

温柔一刀 2024-09-06 18:20:15

我想这也与其他 javascript 文件有关。如果您的某些 javascript 文件包含用于正文加载的处理程序，并且如果您在页面中提供内联正文加载处理程序，则脚本内的处理程序将不会被执行。

回复收藏 0 原文

梦冥 2024-09-06 18:20:15

好吧，如果你问我的话，'' 是一个无效的 id 值。我不会使用任何这样的字符。

为了获得良好的实践，最好使用 window.onload IMO 并将其放置在标记中。或者更好的是，您可以将其移动到 .js 文件并缓存以提高速度。

回复收藏 0 原文

绝情姑娘 2024-09-06 18:20:15

作为一个与 javascript 无关的答案，应用程序的表示层可以采用模板甚至嵌套模板（dreamweaver 或母版页等）的形式，其中可能不需要在正文标记中包含特定代码或与其他代码冲突模板“继承”时需要

回复收藏 0 原文

感受沵的脚步 2024-09-06 18:20:15

除了可能的稍后覆盖之外，我看不出其他原因，这将导致您的代码永远不会被执行。而且，引人注目的 JavaScript 不再受到高度重视。

您应该分配一个函数来监听该事件。您可以这样做：

function onloadFocus() {
    document.getElementById('<id>').focus();
}

if (window.addEventListener) {      
    window.addEventListener('load', function(e) {onloadFocus();}, false);} 
else if (window.attachEvent) {
    window.attachEvent('onload', function(e) {onloadFocus();}); 
}

...或者依赖 javascript 框架，例如 jquery，它可以为您提供相同的功能。

I can see no other reason than the possible later override, which would lead to your code never being executed. Also, obtrusive javascript is not in very high regard anymore.

You should instead assign a function listening to the event. You can do it like this:

function onloadFocus() {
    document.getElementById('<id>').focus();
}

if (window.addEventListener) {      
    window.addEventListener('load', function(e) {onloadFocus();}, false);} 
else if (window.attachEvent) {
    window.attachEvent('onload', function(e) {onloadFocus();}); 
}

...or rely on a javascript framework, such as jquery, that would provide the same functionality for you.

回复收藏 0 原文

烟酒忠诚 2024-09-06 18:20:15

另一种看待它的方法是使用 addEventListener 而不是将其用作 html 代码尝试 JS：

<body onLoad="document.getElementById('<id>').focus();">

    <body>

    <script>

     document.body.addEventListener('load', funcLoad);

     function funcLoad(){

     document.getElementById('<id>').focus();

    }

    </script>
</body>

尝试一下，它可能比其他解决方案工作得更好。

Another way to look at it is using an addEventListener instead of using it as an html code try JS:

<body onLoad="document.getElementById('<id>').focus();">

    <body>

    <script>

     document.body.addEventListener('load', funcLoad);

     function funcLoad(){

     document.getElementById('<id>').focus();

    }

    </script>
</body>

Try it out, it might work better than other solutions.

回复收藏 0 原文

~没有更多了~