window 对象的“生命周期”事件

Posted on |

“生命周期”事件？什么是”生命周期”事件？好吧，我只是想不到标题，于是就想了个“生命周期”名词，个人觉得比较”高大上” (*^__^*)。其实就是网页加载或关闭时触发的事件。

访问一个网页时，可能会触发 window 对象的一些事件(onload, onbeforeunload, onunload, onfocus, onblur等)。我们可以在这些事件触发时，实现一些功能，也可以根据这些事件来捕获用户的一些本地行为等等。

下面这些事件只是在 chrome 上实践过。

window.onload:

onload 事件，会在页面内容包括图片的所有元素加载完毕后才能触发。而jqery的 $(document).ready() 事件，是DOM结构绘制完毕后就触发。同时 window.onload 不能同时编写多个，如果有多个 window.onload 方法，只会触发其中一个。$(document).ready() 可以同时编写多个，并且都可以得到执行。

支持该事件的 HTML 标签：
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

eg-1: 

1
2
3
window.onload = function() {
    alert("主君，加载已经完毕!");
};

window.onbeforeunload:

onbeforeunload 事件，在页面刷新或关闭前触发。可以用来提示用户，是否要离开当前页面。

eg-2: 

1
2
3
window.onbeforeunload = function () {
    return '你舍得离开吗？';
};

window.onunload:

onunload 事件，也是在页面刷新或关闭前触发。区别是 onbeforeunload 在 onunload 之前触发，也就是 onbeforeunload 可以阻止 onunload 的触发。不过这个方法在 chrome 时有效时无效。在 safari 正常使用。

eg-3: 

1
2
3
window.onunload = function() {
    alert("拜拜啦!");
};

下面比较一下 window 和 jQuery 这些事件执行的顺序:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

$(document).ready(function() {
    post("document ready!");
});

$(window).unload(function() {
    post("jquery unload!");
}).load(function() {
    post("jquery load!");
});

window.onload = function() {
    post("window onload!");
};

window.onbeforeunload = function() {
    post("window onbeforeunload!");
};

window.onunload = function() {
    post("window onunload!");
};

function post(event) {
    $.ajax({
        url    : "/events_test",
        method : "POST",
        data   : { event: event }
    });
}

// 执行顺序:
// document ready!
// jquery load!
// window onload!
// window onbeforeunload!
// jquery unload!
// window unload!
  • jquery doucment ready 先触发，接着是 jquery load，然后是 window onload。
  • window beforeunload 先触发， 接着是 window onunload，然后 jquery unload。
  • window onunload 和 jquery unload 事件在 chrome 有时候会触发，有时候不会触发。

这些事件还需要在其他浏览器实践一下。