您所在的位置： &
3.3.1　onload事件
3.3.1　onload事件
[加]David Johnson　Alexei White　Andre Charland
人民邮电出版社
《Ajax企业级开发》首先解释了AJAX为什么在大规模的开发中能有如此广阔的应用前景，接着系统地介绍了当前重要的AJAX技术和组件。第3章章将分析把AJAX应用运行在Web浏览器中碰到的一些常见问题，以及如何使用模式以一种熟悉的方式来设计AJAX架构。本节说的是onload事件。
3.3　启动加载AJAX组件
当Web页面开始加载完成后，AJAX组件的生命周期就开始了。此时我们需要使用一些方法来初始化AJAX组件。和.NET窗体或者Java应用相比，启动AJAX应用的困难会多一些。当初始化这些应用时，我们必须熟悉它们之间存在的一些细微差异。我们需要考虑到这个细节：所有的内联JavaScript，更确切地说是那些没被包含在函数里的JavaScript，会在脚本引擎查找到它们时立即执行，这个细节非常重要。这意味着JavaScript可以在Web页面的其他部分加载之前执行，而JavaScript代码可能在引用这些正在加载的内容。例如，可能存在一些位于Web页面开头的内联JavaScript，它们试图通过$(elementId)方法来访问HTML元素，然而这个方法很可能返回null，并不是因为不存在这个ID的元素，而是Web页面的HTML内容还没有完全呈现完毕（浏览器加载和解析这些内容是需要时间的）。这里存在几种不同的方法来初始化AJAX应用，通过这些方法，你可以确保应用可能需要的所有资源都已经被加载和解析完毕。确保这种做法最常见的方法是使用window或者&body&的onload事件。
3.3.1　onload事件
对于曾经使用过JavaScript的开发者来讲，他们应该熟悉浏览器window对象的onload事件，但是考虑到有些开发者并没有接触过这个事件，并且其他开发者也可以对相关概念进行概要的复习，所以让我们还是简要地回顾一下。onload事件是全局对象window的一个成员，它允许我们指定一个JavaScript函数，这个函数将在整个页面，包括HTML标签、图片以及脚本全部下载到浏览器之后被执行。和大多数的事件不同，window.onload事件的事件处理函数可以通过JavaScript显式地附加指定，或者也可以在HTML内容里显式指定。因为这个事件是在HTML DOM被加载完成和解析完成时触发的，所以我们无法使用DOM的事件系统来给这个事件附加处理函数。通过JavaScript给onload事件指定处理函数的语法如下所示：
window.onload = entAJAX.
在这段代码中，entAJAX.init是一个JavaScript函数的引用，它可以在页面被加载完成后执行。然而，为AJAX应用使用这个方法存在两个缺点。第一个缺点是，通过设置window.onload事件，我们可能覆盖了页面中另一个不同的组件对这个事件的定义。随着JavaScript的mashup技术（即融合两个在线应用，如地图和照片，来创建一个新的应用）越来越多地受到人们的关注，不自觉地覆盖其他人已经定义好的事件或者对象的问题也变得越来越严重。为了使用window.onload启动多个AJAX组件，我们需要创建一个独立的JavaScript代理函数，在这个函数里启动页面中所有的AJAX组件。通常把用于这个目的的函数命名为init()，正如以下代码所展示的，给onload事件附加这个处理函数，尽管现在在这个函数里还没有太多的具体实现。
&html& &head&&script type="text/javascript"&function init() {alert($(dmyComponent").innerHTML);}//设置onload事件来引用Init函数window.onload =&/script&&/head&&body&&div id="myComponent"&My first component goes here.&/div&&/body&&/html&
onload事件的第二个缺点是，AJAX组件只有在完整的页面都被下载完毕后才会被加载。这也意味着浏览器必须等待所有的资源（包括外部链接的图片、CSS和JavaScript）都下载到客户端。这种方式存在一个潜在的问题，如果在下载页面的过程中发生错误，或者用户通过点击浏览器的停止按钮放弃下载，下载都会被中断。通过onload事件启动AJAX组件，AJAX组件可能需要耗费很长的时间来激活，或者更糟糕的是根本不会被启动，尽管这种可能性出现几率不大。
1．当个好邻居
如果我们的JavaScript运行在一个Web页面中，而这个页面中同时还运行着其他组件或者JavaScript框架，那么我们在处理文档事件时就需要非常的小心。因为几乎所有的JavaScript都依赖onload事件来启动它们的加载程序，所以盲目地覆盖window.onload事件是一种很坏的实现思想，这个事件很可能已经被其他JavaScript代码使用了。当两个开发者都为同一个Web页面开发不同的代码或者组件时，这种情况常常会发生。下面是一个简单的Web页面，它包含两个JavaScript文件，这两个文件可能来自不同的作者，每个文件都被编写用来实例化Web页面中不同的组件，例如客户列表和产品列表。
&html&&head&&script type="text/javascript" src="customers.js"&&script type="text/javascript" src="products.js"&&/head&&body&&div id="customerList"&HTML element for Customers.&/div&&div id="productList"&HTML element for Products.&/div&&/body&&/html&
第一个JavaScript文件（customers.js）包含的代码如下所示：
var example1 = {};example1.init = function() {alert($("myCustomers").innerHTML);} window.onload = example1.
第二个JavaScript文件（products.js）包含的代码，出于本例的目的，几乎和上面的代码完全一样，不同的是它引用了另外一个HTML元素。
var example2 = {};example2.init = function() {alert($("myProducts").innerHTML);}window.onload = example2.
和其他的优秀程序员一样，在这个例子中，我们把每个初始化函数都放入它们各自的命名空间。否则，我们可能会碰到我们所负责的函数被其他同名的函数覆盖的严重问题。现在，我们仅遇到了第二个被包含的JavaScript文件把window.onload事件完全覆盖的问题，这也意味着第一个文件所包含的初始化函数将不会被调用。以一种非破坏性的方式给通用的事件处理函数分配方法通常是一种最佳实践。通常非破坏性的事件处理函数分配，或者函数分配，都可以通过复制原有函数和创建一个新的匿名函数来完成，这个匿名函数对原有函数和新的函数进行封装。例如，两个被包含的JavaScript文件都可以像下面的代码这样将它们的事件处理函数附加到window.　onload事件：
var example2 = {};example2.init = function() {alert($("myProducts").innerHTML);}//保存所有先前定义的onload事件处理函数var oldLoader = window.onload || function() {};//创建闭包调用example2.init和先前定义的方法window.onload = function() {example2.init();oldLoader.call(this);}
我们的实现代码中在oldLoader变量里保存了一个对原有onload事件处理函数的引用，然后设置window.onload事件到一个匿名函数，这个匿名函数既会调用新的名为example2的init事件处理函数，又会调用原有的onload事件处理函数。这段代码之所以可以运行，完全是因为JavaScript闭包，当然，除了代码是运行在全局作用域之外，oldLoader也是一个全局变量。不管哪一种方法，oldLoader变量尽管定义在匿名函数的外部，但是当匿名函数在页面完成加载执行之后却依然是可访问的。
2．混合内容和功能
我们关于onload事件的讨论差不多可以结束了。然而，只是为了讨论的完整性，我们也许应该提及一种应该避免使用的onload事件方法。和其他所有的HTML事件类似，onload事件可以像下面这样被指定作为HTML &body&元素的一个属性：
&body onload="example1.init();"&
注意，和通过JavaScript附加事件处理函数不同，我们实际上已经编写了一个处理函数的调用，这个函数后面带有括号――当直接把事件指定到HTML元素上时，这个事件属性的内容应该是合法的JavaScript代码，这些代码将由Web页面执行。尽管这种方式非常吸引人，但是通常我们并不赞成使用这种方式，因为它不仅混淆了Web页面的表现和功能之间的界限，而且&body&元素上的onload事件也会覆盖其他所有在window对象上指定的onload事件，使得其他JavaScript组件的启动变得非常困难。&&&&&&
关于&&&&&&&&&&&&的更多文章
当下HTML5技术一直受到各方关注，“HTML5颠覆原生App”的争论也
本书描述了黑客用默默无闻的行动为数字世界照亮了一条道路的故事。
讲师： 3人学习过讲师： 7人学习过讲师： 7人学习过
本书主要阐述了云计算中PaaS 平台的实现与运维管理，
这既是古典媒体的大裂变年代，也是在线媒体开启的新闻
在内容上，《Android系统源代码情景分析（修订版）（
作为深受编程人员爱戴和尊敬的编程专家，微软.NET开发团队的顾问，本书作者Jeffrey Richter针对开发各种应用程序（如Web Form、W
51CTO旗下网站页面onload事件能不能加载两个方法【ajax吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：20,012贴子：
页面onload事件能不能加载两个方法收藏
快试试吧，可以对自己使用挽尊卡咯~◆◆
例如：&body&onload=&Loademp();LoaddeptName();&&
function&Loademp(){
& createXMLHTTP();//创建XMLHttpRequest对象
var&url=&servlet/PersonManager?id=Loademp&;
xmlHttp.open(&GET&,url,true);
xmlHttp.onreadystatechange=isL
xmlHttp.send(null);
}
&function&LoaddeptName(){
createXMLHTTP();//创建XMLHttpRequest对象
var&url=&servlet/PersonManager?id=LoaddeptName&;
xmlHttp.open(&GET&,url,true);
xmlHttp.onreadystatechange=isLoadDeptN
xmlHttp.send(null);
}
与百万美粉分享你老爸的 “ba”气十足，空调洗衣机任性送
快试试吧，可以对自己使用挽尊卡咯~◆◆
可以,理论上是没有限制的.
好好学习，天天向上
好好学习，天天向上
登录百度帐号推荐应用自定义addLoadEvent函数为body.onload事件绑定多个函数
我的图书馆
自定义addLoadEvent函数为body.onload事件绑定多个函数
addLoadEvent可以实现无论有多少个函数，都能让它们同时和window.onload事件绑定。
addLoadEvent工作流程：&1 把现有的window.onload事件处理函数的值存入变量oldonload。&2 如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它；&3 如果在这个处理函数已经绑定了一些函数，就把函数追回到现有指令未尾。&4 浏览器加载html内容是自上而下的（默认），而JS一般是在哪里引入——想想如果JS里面包含了一些即时执行指令，它会操作根本不存在元素节点（因为还没有加载完）会有什么后果？结果就是出错。&
addLoadEvent()函数代码：&
function addLoadEvent(func)
var oldonLoad = window.
if (typeof window.onload != 'function')
window.onload =
window.onload = function ()
oldonload();
调用方法：&
addLoadEvent(firestFunction);
addLoadEvent(secondFunction);
TA的推荐TA的最新馆藏Javascript中onload加载多个函数实例-js教程-网页制作-壹聚教程网Javascript中onload加载多个函数实例
昨天有一个功能需要在一个页面多次使用onload的方法，但好像一个页面一般情况下只能使用一次onload加载一个函数呀，后来百度了发现onload加载多个函数方法很简单，下面我来给大家介绍一下。
如果直接对winow.onload进行赋值，会覆盖原来绑定的onload事件。如何能多次绑定了，有下面三种方法
1、将要绑定的事件写在一块，然后对onload进行赋值
window.onload=function(){function1();function2();}
2、通过自定义addLoadEvent来解决
function addLoadEvent(func){
var oldonload=window.
if(typeof window.onload!=&function&){
window.onload=
window.onload=function(){
oldonload();
添加要加载执行的事件:
addLoadEvent(func1);
addLoadEvent(func2);
3、要想在你的程序中给一个事件指派多个处理过程的话，只要首先判断一下浏览器，然后根据不同的浏览器，选择使用 attachEvent 还是 addEventListener 就可以了。实例如下
if (document.all) {
window.attachEvent(&onload&, func1);
window.attachEvent(&onload&, func2);
window.addEventListener(&load&, func1, false);
window.addEventListener(&load&, func2, false);
除了上面方法还有没有其它办法呢
用法如下：
function func(){alert(&this is window onload event!&);}
window.onload=
或者如下：
window.onload=function(){alert(&this is window onload event!&);}
但window.onload 不能同时加载多个函数。
function t(){
alert(&t&)
function b(){
alert(&b&)
window.onload =
window.onload =
后面会把前面的覆盖，上面代码只会输出 b。
此时可用如下方法解决：
window.onload =function() { t();& b(); }
另一种解决办法
Code highlighting produced by Actipro CodeHighlighter (freeware)/--& function addLoadEvent(func) {
& var oldonload = window.//得到上一个onload事件的函数
& if (typeof window.onload != 'function') {//判断类型是否为'function',注意typeof返回的是字符串
&&& window.onload =
& } else {&
&&& window.onload = function() {
&&&&& oldonload();//调用之前覆盖的onload事件的函数----&由于我对js了解不多,这里我暂时理解为通过覆盖onload事件的函数来实现加载多个函数
&&&&& func();//调用当前事件函数
//(完整示例)使用如下：
function t(){
alert(&t&)
function b(){
alert(&b&)
function c(){
alert(&c&)
&function addLoadEvent(func) {
& var oldonload = window.
& if (typeof window.onload != 'function') {
&&& window.onload =
& } else {&
&&& window.onload = function() {
&&&&& oldonload();
&&&&& func();
addLoadEvent(t);
addLoadEvent(b);
addLoadEvent(c);
//等价于& window.onload =function() { t();& b(); c() ;}
个人以为直接使用隐式函数(如：window.onload =function() { t();& b(); c() ;})更快捷，当然使用 addLoadEvent 更professional，各取所好吧！
执行多个window.onload产生too much recursion错误
，通用的解决方案如下：
&script type=&text/&&
var func = window.
window.onload = function(){
&&& func ? func() : 0;
&&& alert(1);
这样的原理就是把window.onload事件一级一级传递，保证每一个window.onload事件能执行，但如果出现多次调用而且变量名一样，就会产生too much recursion错误，如下
&script type=&text/javascript&&
var func = window.
window.onload = function(){
&&& func ? func() : 0;
&&& alert(1);
func = window.
window.onload = function(){
&&& func ? func() : 0;
&&& alert(2);
上面实现执行两个window.onload事件，但由于每次传递window.onload事件定义为相同的变量名，就会产生too much recursion错误。
由于产生的原因是因为定义为相同的变量名产生循环执行代码，因此解决方法只需要把变量名定义不同即可解决。如下
&script type=&text/javascript&&
var func = window.
window.onload = function(){
&&& func ? func() : 0;
&&& alert(1);
func1 = window.
window.onload = function(){
&&& func1 ? func1() : 0;
&&& alert(2);
Web页面如果出现多次window.onload事件，尽量能合并操作处理，或实现类似于jQuery的ready事件机制，解决冗余代码问题，提高代码的可读性。
更多详细内容请查看：
上一页： &&&&&下一页：相关内容