当前位置:学会吧培训频道电脑知识学习网页制作Javascript教程javascript的事件加载» 正文

javascript的事件加载

[08-08 00:41:47]   来源:http://www.xuehuiba.com  Javascript教程   阅读:8342
概要:通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式:1.window.onload = function(){ 2. func1(); 3. func2(); 4. func3(); 5. //更多加载事件……………… 6.}但如果由于某种特殊需要,我们不能合在一起写吗?如当前区域是面向管理员,后台生成页面时只有当用户是管理员,页面才生成这部分,而这部分也用到一些特殊的脚本,上面的方法就歇菜了!01.//后台代码 02.<script type="text/javascript"> 03. window.onload = function(){ 04. func1(); 05. func2(); 06. //加载普通用户用到的脚本…… 07. } 08.</script> 09.<%# 以下脚本是为管理员准备的 %
javascript的事件加载,标签:javascript视频教程,javascript教程下载,http://www.xuehuiba.com

通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式:

1.window.onload = function(){
2.      
func1();
3.      
func2();
4.      
func3();
5.      
//更多加载事件………………
6.}
但如果由于某种特殊需要,我们不能合在一起写吗?如当前区域是面向管理员,后台生成页面时只有当用户是管理员,页面才生成这部分,而这部分也用到一些特殊的脚本,上面的方法就歇菜了!

01.//后台代码
02.<script type="text/javascript">
03.     
window.onload = function(){
04.       
func1();
05.       
func2();
06.       
//加载普通用户用到的脚本……
07.     
}
08.</script>
09.<%# 以下脚本是为管理员准备的 %>
10.<% if @user.role == "manager"   %>
11.     
window.onload = function(){
12.     
func1();
13.     
func2();
14.     
//加载机密脚本……
15.     
}
16.<% end %>
这种情况生成出来的页面拥有两个window.onload代码块,很显然,第二个覆盖掉第一个。这时,轮到loadEvent函数出场了。

01.var loadEvent = function(fn) {
02.   
var oldonload = window.onload;
03.   
if (typeof window.onload != 'function') {
04.       
window.onload = fn();
05.   
}else {
06.       
window.onload = function() {
07.           
oldonload();
08.           
fn();
09.       
}
10.   
}
11.}
它非常完美地解决了互相覆盖的问题,用法如下:

1.loadEvent(func1);
2.loadEvent(func2);
3.loadEvent(func3);
4.//更多加载事件
但现实的问题总是如此出奇不意,也如此刁钻邪门。最近我想把所有的函数放到一个闭包中,以免除命名冲突之苦,比如那个有名的$的DOM选择器。JQuery,Prototype,mootool都用它做选择器的名字,共存成了个严重的问题。

01.(function(){
02.   
if(!window.JS){
03.       
window['JS'] = {}
04.   
}
05.   
var onReady = function(fn){
06.       
var oldonload = window.onload;
07.       
if (typeof window.onload != 'function') {
08.           
window.onload = fn();
09.       
}else {
10.           
window.onload = function() {
11.               
oldonload();
12.               
fn();
13.           
}
14.       
}
15.   
}
16.   
JS.onReady = onReady;
17.   
var $ = function(id){
18.       
return document.getElementById(id);
19.   
}
20.   
JS.$ = $;
21.})()<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>闭包环境中的事件加载</title>
    <script type="text/javascript">
      (function(){
        if(!window.JS){
          window['JS'] = {}
        }
        var onReady = function(fn){
          var oldonload = window.onload;

[1] [2] [3] [4] [5] [6]  下一页


Tag:Javascript教程javascript视频教程,javascript教程下载电脑知识学习 - 网页制作 - Javascript教程
Copyright 学会吧 All Right Reserved.
在线学习社区!--学会吧
1 2 3 4 5 6 7 7 8 9 10 11 12 13