对象 - window对象 ¶

• 作者：KK

• 发表日期：2016.2.21

window对象代表了当前网页窗口,按照我的认知,它可能就是当前网页所有全局函数/对象/变量的管理者

为什么这么说呢

你试以下面的代码,效果是一样的:

var aaa = 998; //定义一个全局变量aaa
alert(aaa);

alert(window.aaa); //也是显示998

其实所有全局的东西都是可以通过window对象来访问的

有全局变量,那么就通过window.属性的语法来获取就可以,这里的属性就是变量名称

有全局函数,那么就通过window.方法()的语法来调用,这里的方法就是函数名称,传参也是照样传,试下:

alert(123);
window.alert(123); //alert函数作为全局函数,也是能通过window来访问
window.myFun(); //全局自定义函数也挂靠到window的管理范围下了

function myFun(){
	alert('自定义函数');
}

这下你可知道window是什么大人物了吧

我再来一篇代码,如果你看不懂就回复提问吧,否则证明你的思维还可以:

window.aba = 997;
alert(aba); //为什么也提示997?不知道就留言,知道就继续学下去吧

window.xxx = function(){
	return 3 * window.aba * aba;
}
alert(xxx());

//连document都是window的孩子!一般人我不告诉他,你自己再想像一下其它东西是不是window的孩子~
alert(window.document.body.innerHTML);

通过代码监听窗口加载事件 ¶

之前为了简单教学让你快速入门学到些东西做小程序,所以我只教大家给body标签加onload属性来监听页面加载完毕的事件

现在通过代码来监听,其实按照之前JS监听事件的代码知识点上也可以自己设想到,但这里我明确说明一下

大部分开发者都不是添加onload属性来监听的,虽然你用属性也不会有什么问题,用JS代码就是这样:

window.addEventListener('load', function(){
	alert('页面加载完毕1');
});

//或者下面这样,老方式,大部分的写法:
/*window.onload = function(){
	alert('页面加载完毕2');
};/*

并且上面的代码中如果你两种方式都一齐用,会造成2次页面加载完毕提示

但你可能疑问,之前是给body加onload属性来监听,那换成代码不应该是这样才对吗:

document.body.onload = function(){
	alert('页面加载完毕');
};

对!你是对!但可能是这个代码太长了,于是很多人懒得写,就直接用window.onload了

实际上我认为body的onload事件是在body加载完之后才执行,但body外面的标签还没加载完呢

然而window的onload事件是整个网页窗口加载完毕才执行的,所以window.onload会更加好,确保所有东西加载完了才做事情

但是回到一句老话上:能用addEventListener方法就尽量用addEventListener方法,别再onxxx了