由窗口触发该事件 (适用于 <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>
https://blog.csdn.net/long_songs/article/details/123531243