JavaScript常用事件——window事件

---

0.前言

上一节主要是了解事件的概念，直到时间的设置方式，接下来我们来说说一些window中常用事件：

• onload加载事件和onunload卸载事件；
• onscroll滚动事件；
• onresize窗口变化事件。

1.onload加载事件和onunload卸载事件

当页面完全加载之后触发加载事件(onload)

window.onload = function() {
            alert("我在界面加载后提示");
        };

        alert("加载界面中……");

当页面完全卸载之后触发卸载事件(unload)

window.onunload = function() {
            alert("sunck is a good man!");
        };

2.onscroll滚动事件

当滚动的时候触发滚动事件

window.onscroll = function() {
            console.log("滚动");

            var h = document.documentElement.scrollTop || document.body.scrollTop;
            console.log(h);
        };

document.documentElement.scrollTop 和document.body.scrollTop;是用来设置滚动跳的高度。
上面是加载并设置滚动条，但是当我们滚动到底部时，想要返回到最上面怎么办呢？我们可以在底部设置一个按钮，并添加事件监听：

function func() {
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
        }

将其滚动条设置为“0”即可。

3.onresize窗口变化事件

改变窗口尺寸时触发窗口变化事件

window.onresize = function() {
            console.log("窗口变化");

            var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;

            var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;

            console.log(w, h);
        };

注意：我们要记住获取屏幕的宽和高，有助于往后的开发。

var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;

            var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;

4.总结

这只是其中的一部分，有兴趣的朋友可以自己去尝试尝试。各位大哥大姐，给点打赏吧！！！！