BOM

BOM 概述

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

window 对象的常见事件

window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

注意：

1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
2. window.onload 传统注册事件方式 只能写一次，会以最后一个 window.onload 为准。
3. 多个就使用addEventListener 不会被覆盖

window.onload = function(){}
或者 
window.addEventListener("load",function(){});

• DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
• Ie9以上才支持
• 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

document.addEventListener('DOMContentLoaded',function(){})

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

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);
      })
// 33 
// 22

定时器

• setTimeout() 定时器 window.setTimeout(调用函数, [延迟的毫秒数])，停止 clearTimeout(timeoutID)
• setInterval() 定时器 setInterval(回调函数, [间隔的毫秒数])，重复调用一个函数，每隔这个时间，就去调用一次回调函数，停止clearInterval(intervalID)

eg : 实时刷新的倒计时效果

      var day = document.querySelector(".day");
      var hour = document.querySelector(".hour");
      var minute = document.querySelector(".minute");
      var second = document.querySelector(".second");
      var inputTime = +new Date("2022-07-31 18:00:00"); // 用户输入时间总的毫秒数
      countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
      setInterval(countDown, 1000);
      function countDown() {
        var nowTime = Date.now(); // 现在时间总的毫秒数
        var times = (inputTime - nowTime) / 1000; // 剩余时间总秒数
        var d = parseInt(times / 60 / 60 / 24);
        d = d < 10 ? "0" + d : d;
        day.innerHTML = d;
        var h = parseInt((times / 60 / 60) % 24);
        h = h < 10 ? "0" + h : h;
        hour.innerHTML = h;
        var m = parseInt((times / 60) % 60);
        m = m < 10 ? "0" + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60);
        s = s < 10 ? "0" + s : s;
        second.innerHTML = s;
      }