Fatal编程技术网
  • javascript/
  • 为什么不在body元素上使用Javascript处理程序呢？

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

javascript html

为什么不在body元素上使用Javascript处理程序呢？,javascript,html,dom-events,handler,onload,Javascript,Html,Dom Events,Handler,Onload,作为对问题的回答，建议使用 <body onLoad="document.getElementById('<id>').focus();"> （未作进一步解释）： 任何一本Javascript书籍都会告诉你这一点 在body元素上放置处理程序 那样 为什么这会被认为是不好的做法？在Espos的回答中，说明了“覆盖”问题。这是唯一的原因，还是还有其他问题？兼容性问题？我想这也与其他javascript文件有关。如果某些javascript文件包含body onload

作为对问题的回答，建议使用

<body onLoad="document.getElementById('<id>').focus();">
（未作进一步解释）：

任何一本Javascript书籍都会告诉你这一点 在body元素上放置处理程序 那样

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

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

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

在jQuery及其
.load（）
等现代框架中，回调可以堆叠，在同一页面上使用不同的脚本、插件等时不会发生冲突

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


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


如果你问我，
“
是无效的id值。我不会用这样的角色


对于良好的实践，最好使用window.onload IMO并将其放置在
标记中。或者更好的是，您可以将其移动到.js文件并缓存以提高速度。
作为一个与javascript无关的答案，您应用程序的表示层可以是模板，甚至是嵌套模板（dreamweaver或母版页等）当模板“继承”时，可能不需要在body标记中包含特定代码，或者与所需的其他代码冲突，我看不到其他原因，除了可能的后续重写，这将导致代码永远无法执行。此外，引人注目的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();}); 
}



函数onloadFocus（）{
document.getElementById（“”）.focus（）；
}
if（window.addEventListener）{
addEventListener（'load'，函数（e）{onloadFocus（）；}，false）；}
else if（窗口附件）{
attachEvent（'onload'，函数（e）{onloadFocus（）；}）；
}



…或依赖javascript框架，如jquery，为您提供相同的功能。
在
元素中使用
onload
属性没有问题，前提是：


    

  • 您可以完全控制页面
    • 

  • 当前或将来在页面上使用的任何其他脚本都不会尝试在body元素或
    窗口
    对象上设置
    onload
    处理程序
    • 

  • 你知道自己的想法，并且很高兴在你的标记中有一小段脚本
    • 



还值得注意的是，
是正式标准（HTML4）的一部分，而
窗口则不是。onload
是正式标准的一部分，尽管它在许多年前的所有主流浏览器中都实现了。
暂时不考虑内联事件处理程序属性是否是错误的问题，
onload
事件不适合放置自动对焦器，因为它仅在加载整个页面（包括图像）时触发

这意味着用户需要等待更长的时间才能进行自动对焦，如果加载页面需要相当长的时间，他们可能已经在浏览器页面（或chrome，如地址栏）上的其他地方对焦了，但在键入过程中却发现自己的对焦被盗。这非常令人恼火

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


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




document.getElementById（'x'）.focus（）；

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


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

    <body>

    <script>

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

     function funcLoad(){

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

    }

    </script>
</body>




document.body.addEventListener（'load'，funcLoad）；
函数funcLoad（）{
document.getElementById（“”）.focus（）；
}



试试看，它可能比其他解决方案更有效。
你提到这一点很好。这是我从很多用户那里得到的一个特性请求。我不知道这是否与他们的低经验水平有关，坦率地说，我不知道有什么好的方法可以替代js技巧。如果浏览器可以选择将焦点放在tabindex最低的元素上，而经验丰富的用户可以选择退出，那就太好了。我个人觉得这很烦人，但我不知道如何找到一个好的折衷方法。也许可以实现“聚焦跟随凝视”，因为这似乎是我的用户想要的：）+1。完全同意，我考虑过提出这一点，但在写了
onload
问题后，我失去了热情。事实上，传统上
窗口
对象没有正式标准化。现在已经解决了：HTML5浏览器对象模型的这一部分，包括
onload
@Pekka如果body还没有加载，document.body.onload怎么能工作？@system不确定你的意思？@Pekka我的意思是，如果将document.body.onload放在标题中，如果正文尚未加载，它将如何工作？@systempunto如果将document.body.onload放在标题中，则在加载正文（包括图像和样式表）时，将执行在事件中输入的任何内容。您可以随时分配事件，在这种情况下，您甚至必须在加载实体之前分配事件，否则它将永远不会触发。这是你的意思吗？如果我把document.body.onload放在头上