gpt4 book ai didi

javascript - 使作用域函数可以从 中的主 onload 函数访问

转载 作者:行者123 更新时间:2023-12-01 01:23:27 26 4
gpt4 key购买 nike

我的代码的过于简化的示例:

<head>
<script type="text/javascript">
main();

function main() {
if(document.readyState == 'complete') {
function a() { /*do stuff*/ }
function b() { /*do stuff*/ }
} else {
setTimeout(function() { main(); }, 1000);
}
}
</script>
</head>
<body onload="javascript: main();">
<div onclick="javascript: a();"></div>
<div onclick="javascript: b();"></div>
</body>

我想知道是否有办法处理 a() 的 onclick 事件和b()无需输入 <script> 即可被识别标签位于文档末尾。我知道通过将变量和函数设为全局可以相对轻松地做到这一点,但这并不是一个好的做法。我也许可以使用闭包,但我原来的代码有超过 2 个函数,这会很痛苦。

最佳答案

I know I could do that relatively easily by making variables and functions global, but it's hardly good practice.

如果您要使用 onxyz-attribute-style 事件处理程序,则必须使这些函数可全局访问。

这是不使用它们的众多原因之一。

...without putting the tag at the end of the document.

这是一个奇怪的要求,因为那是 where the script tag should go .

但是您可以通过几种方式做到这一点:

  1. 使用 DOMContentLoaded 事件,并在事件处理程序中使用 addEventListener 连接处理程序。

  2. 使用 setTimeout 循环等待元素出现(通常这是没有 DOMContentLoaded 的环境的后备方案,如果有的话)左)。

  3. 使用事件委托(delegate),将事件挂接到 documentdocument.body 上,然后检查事件是否通过您感兴趣的元素查看 event.target 及其父元素(或使用相对较新的 closest 方法)。

除非有充分的理由将 script 保留在 head 中,否则最好的选择是:

<head>
</head>
<body>
<div id="divA">divA</div>
<div id="divB">divB</div>
<script type="text/javascript">
main();

function main() {
document.getElementById("divA").addEventListener("click", function a() {
console.log("a click");
});
document.getElementById("divB").addEventListener("click", function b() {
console.log("b click");
});
}
</script>
</body>

...其中使用id只是一个示例。在实践中,您通常可以通过 CSS 选择器来识别相关元素,该选择器可以与 document.querySelectordocument.querySelectorAll 一起使用。

<小时/>

旁注:您不能在 onxyz-attribute-style 事件处理程序上使用 javascript: 伪协议(protocol)。 (您可以在需要 URL 的地方使用它,例如 href 或书签。)

关于javascript - 使作用域函数可以从 <head> 中的主 onload 函数访问,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54038676/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com