窗口事件属性（Window Event Attributes）//失去焦点，窗口大小变化，页面加载…

由窗口触发该事件 (适用于 <body> 标签):

属性	新旧	描述
onafterprint	New	在打印文档之后运行脚本
onbeforeprint	New	在文档打印之前运行脚本
onbeforeonload	New	在文档加载之前运行脚本
onblur		当窗口失去焦点时运行脚本
onerror	New	当错误发生时运行脚本
onfocus		当窗口获得焦点时运行脚本
onhashchange	New	当文档改变时运行脚本
onload		当文档加载时运行脚本
onmessage	New	当触发消息时运行脚本
onoffline	New	当文档离线时运行脚本
ononline	New	当文档上线时运行脚本
onpagehide	New	当窗口隐藏时运行脚本
onpageshow	New	当窗口可见时运行脚本
onpopstate	New	当窗口历史记录改变时运行脚本
onredo	New	当文档执行再执行操作（redo）时运行脚本
onresize	New	当调整窗口大小时运行脚本
onstorage	New	当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本
onundo	New	当文档执行撤销时运行脚本
onunload	New	当用户离开文档时运行脚本

就挑几个最经典的窗口事件好了

下面这个可以给朋友表演魔术，换个网页再换回来就变了大样

案例演示1：当窗口失去焦点时”：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script>
<!-- 精髓就是下面这一行 -->
    window.onblur = function () {
        var ul = document.createElement("ul");

        var li1 = document.createElement("li");
        var text1 = document.createTextNode("月）");
        li1.appendChild(text1);
        ul.appendChild(li1);

        var li2 = document.createElement("li");
        var text2 = document.createTextNode("牙））");
        li2.appendChild(text2);
        ul.appendChild(li2);

        var li3 = document.createElement("li");
        var text3 = document.createTextNode("天）））");
        li3.appendChild(text3);
        ul.appendChild(li3);

        var li4 = document.createElement("li");
        var text4 = document.createTextNode("冲））））");
        li4.appendChild(text4);
        ul.appendChild(li4);

        document.getElementsByTagName("body")[0].appendChild(ul);

    };
</script>
</body>
</html>

案例演示2：当窗口获取焦点时：

这和上面的很像了

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
<!-- 精髓就是下面这一行 -->
    window.onfocus = function () {
        var ul = document.createElement("ul");

        var li1 = document.createElement("li");
        var text1 = document.createTextNode("月）");
        li1.appendChild(text1);
        ul.appendChild(li1);

        var li2 = document.createElement("li");
        var text2 = document.createTextNode("牙））");
        li2.appendChild(text2);
        ul.appendChild(li2);

        var li3 = document.createElement("li");
        var text3 = document.createTextNode("天）））");
        li3.appendChild(text3);
        ul.appendChild(li3);

        var li4 = document.createElement("li");
        var text4 = document.createTextNode("冲））））");
        li4.appendChild(text4);
        ul.appendChild(li4);

        document.getElementsByTagName("body")[0].appendChild(ul);

    };
</script>
</body>
</html>

案例演示3：当页面文档加载完成后：

这个可以配合延时器使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
<!-- 精髓就是下面这一行 -->
    window.onload = function () {
        var ul = document.createElement("ul");

        var li1 = document.createElement("li");
        var text1 = document.createTextNode("月）");
        li1.appendChild(text1);
        ul.appendChild(li1);

        var li2 = document.createElement("li");
        var text2 = document.createTextNode("牙））");
        li2.appendChild(text2);
        ul.appendChild(li2);

        var li3 = document.createElement("li");
        var text3 = document.createTextNode("天）））");
        li3.appendChild(text3);
        ul.appendChild(li3);

        var li4 = document.createElement("li");
        var text4 = document.createTextNode("冲））））");
        li4.appendChild(text4);
        ul.appendChild(li4);

        document.getElementsByTagName("body")[0].appendChild(ul);

    };
</script>
</body>
</html>

案例演示4：当调整窗口大小时：

这个可以用来根据窗口大小来调整组件大小

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
<!-- 精髓就是下面这一行 -->
    window.onresize = function () {
        var ul = document.createElement("ul");

        var li1 = document.createElement("li");
        var text1 = document.createTextNode("月）");
        li1.appendChild(text1);
        ul.appendChild(li1);

        var li2 = document.createElement("li");
        var text2 = document.createTextNode("牙））");
        li2.appendChild(text2);
        ul.appendChild(li2);

        var li3 = document.createElement("li");
        var text3 = document.createTextNode("天）））");
        li3.appendChild(text3);
        ul.appendChild(li3);

        var li4 = document.createElement("li");
        var text4 = document.createTextNode("冲））））");
        li4.appendChild(text4);
        ul.appendChild(li4);

        document.getElementsByTagName("body")[0].appendChild(ul);

    };
</script>
</body>
</html>

HTML组件自适应 javascript实现，多种多样融会贯通_long_songs的博客-CSDN博客https://blog.csdn.net/long_songs/article/details/123531243