窗口页面加载事件

在之前没有学习 BOM 时，我们书写 HTML 和 Script 的顺序是先写完 HTML 再写 Script，目的是先让 HTML加载完，才能执行后面的交互效果，但是学习了 BOM 后，我们就可以实现 Script 标签随意放啦

---

window.addEventListener('load',function(}) :

这个方法可以使文档内容全部加载完后再执行 JS 的内容，包括了图片，flash，css，脚本文件等等，(如果使用的 window.οnlοad=function(){} 的话那么相同的元素只能被注册一次，并且以最后一次为准，使用该侦听函数注册事件则可以注册多次)，Script 标签可以放在 HTML 的前面，也可以放在 head 里面，或者是放在外部，以下便是使用该方法后将 Script 标签放在了 HTML 标签的上部

  <script>
        window.addEventListener('load',function(){
             var ele=document.querySelector('button');
        ele.addEventListener('click',function(){
            alert('我弹出啦');
          })
    })
     </script>
    <button>按钮</button>

---

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

该方法与上面的区别在于，这个事件仅当 DOM 加载完成就可以去执行 JS 的交互内容了，不包括图片，css，flash，脚本文件等等，如果一个页面图片很多，使用 onload 事件将会耗费大量时间，那么使用这个事件去注册将会大大减少用户等待页面的时间

 <script>
        window.addEventListener('DOMContentLoaded',function(){
             var ele=document.querySelector('button');
        ele.addEventListener('click',function(){
            alert('我弹出啦');
          })
    })
     </script>
    <button>按钮</button>