8.1 窗口事件

• onload
• onunload
• onresize
• onmove
• onabort
• onerror
• onfocus
• onblur

onload

• 页面元素加载完成后调用；

• 调用多个操作：

• 方法 1

    <script>
        function action1() {
            console.log(1);
        }
        function action2() {
            console.log(2);
        }
        
        window.onload = function () {
            action2();
            action1();
        };
    </script>

• 方法 2

    <script>
        function myOnload(func) {
            var oldOnload = window.onload;

            if (typeof oldOnload == "function") {
                window.onload = function () {
                    if (oldOnload) {
                        oldOnload();
                    }
                    myOnload();
                }
            } else {
                window.onload = myOnload;
            }
        }
        function action1() {
            console.log(1);
        }
        function action2() {
            console.log(2);
        }
        
        myOnload(action1());
        myOnload(action2());
    </script>

onunload

• 用户关闭页面是调用；

        window.onunload = function () {
            myWindow=window.open('https://www.baidu.com','','width=200,height=100');
            myWindow.document.body.innerHTML = "<p>The new window.</p>";
            self.focus();
        };

onresize

• 页面大小变化时；

onmove

• 窗口移动时；

onabort

• 取消图像加载时；

onerror

• JavaScript 错误时；建议设置 onerror=null 减少用户干扰；

onfocus

• 活动窗口时；

onblur

• 退出活动窗口时；

        window.onblur = function () {
            myWindow=window.open('https://www.baidu.com','','width=200,height=100');
            myWindow.document.body.innerHTML = "<p>The new window.</p>";
            self.focus();
        };