Javascipt onload Event的研究

最新推荐文章于 2021-12-02 18:01:20 发布

原创最新推荐文章于 2021-12-02 18:01:20 发布 · 515 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#website #function

Javascript 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了网页加载事件中不同类型的onload事件触发机制及其执行顺序。重点分析了body中的onload、window.onload与window.attachEvent的区别及如何正确使用以确保所有事件都能按预期触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近研究Website性能问题，发现onload event真的很有意思，运行顺序也是不一样的，有时候可能会被覆盖

第1种：Body中的onload

第2种：window.onload

第3种：window.attachEvent

<html>
<head>
<script type="text/javascript" language="javascript">
window.onload=function()
{
alert("first run");
}
</script>
</head>
<body onload="alert('third run');">
<script type="text/javascript" language="javascript">
function twofunction()
{
alert("second run");
}
window.attachEvent('onload',twofunction());
</script>
</body>
</html>

以上代码执行的顺序是 2、3，1没有被执行，因为被3覆盖了

要想1也被执行，那么应该改成

<html>
<head>
<script type="text/javascript" language="javascript">
function firstfunction()
{
alert("first run");
}
window.attachEvent('onload',firstfunction());
</script>
</head>
<body onload="alert('third run');">
<script type="text/javascript" language="javascript">
function twofunction()
{
alert("second run");
}
window.attachEvent('onload',twofunction());
</script>
</body>
</html>