ThatManK Mobile Article

onload事件

Category: JS Tutorial: DOM操作 Published: 2026-04-07 13:58 Views: 20 Likes: 0 Comments: 0

window onload 事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      // 会被下面覆盖掉
      // window.onload = function () {
      //   var btn = document.querySelector("button");
      //   btn.addEventListener("click", function () {
      //     alert("点击我");
      //   });
      // };

      //   window.onload = function () {
      //     alert(22);
      //   };

      // 33 22 点击我
      window.addEventListener("load", function () {
        var btn = document.querySelector("button");
        btn.addEventListener("click", function () {
          alert("点击我");
        });
      });

      window.addEventListener("load", function () {
        alert(22);
      });

      document.addEventListener("DOMContentLoaded", function () {
        alert(33);
      });

      // load 等页面内容全部加载完毕, 包含页面dom元素 图片 flash  css 等等
      // DOMContentLoaded 是DOM 加载完毕, 不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
    </script>
  </head>

  <body>
    <button>点击</button>
  </body>
</html>