JavaScript之BOM(BOM构成、常用事件)(1)，2024年最新大厂前端面试笔试题目

window.addEventListener(“load”,function(){});

如上例：

点击

这个时候也可以实现点击效果。

需要注意的是：

1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload是等页面内容全部加载完毕，再去执行处理函数。

2. window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。

3. 如果使用 addEventListener 则没有限制。

如果此时我们还有一个点击事件，想要将它的操作放到元素前面呢？

来操作试试：

点击

打印结果如何呢？

可以发现，第一个事件会被第二个事件覆盖，这是，我们可以另一种方式来操作，如下：

document.addEventListener(‘DOMContentLoaded’,function(){})

代码为：

点击

运行结果为：

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

2、调整窗口大小事件

---

在很多网站上，我们会发现，当我们改变窗口大小时，里面的内容也会随之改变，这又是怎样做到的呢？这里就要用到我们的调整窗口大小事件。

其格式为：

//（1）

window.onresize = function(){}

//(2)

window.addEventListener(“resize”,function(){});

window.onresize是调整窗口大小加载事件, 当触发时就调用的处理函数。

举个例子：

页面中有一个盒子，当我们的页面宽度小于800px时，让这个盒子的颜色变成紫色。