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

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

访问一个网页时,可能会触发 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 有时候会触发,有时候不会触发。

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