首页 / JAVASCRIPT / javascript 事件加载与预加载

javascript 事件加载与预加载

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript 事件加载与预加载，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7251字，纯文字阅读大概需要11分钟。

内容图文

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


window.onload = function(){ 
func1(); 
func2(); 
func3(); 
//更多加载事件……………… 
} 
 
但如果由于某种特殊需要，我们不能合在一起写吗？如当前区域是面向管理员，后台生成页面时只有当用户是管理员，页面才生成这部分，而这部分也用到一些特殊的脚本，上面的方法就歇菜了！
 代码如下:
//后台代码 
<script type="text/javascript"> 
window.onload = function(){ 
func1(); 
func2(); 
//加载普通用户用到的脚本…… 
} 
</script> 
<%# 以下脚本是为管理员准备的 %> 
<% if @user.role == "manager" %> 
window.onload = function(){ 
func1(); 
func2(); 
//加载机密脚本…… 
} 
<% end %> 
 
这种情况生成出来的页面拥有两个window.onload代码块，很显然，第二个覆盖掉第一个。这时，轮到loadEvent函数出场了。 
 代码如下:
var loadEvent = function(fn) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = fn; 
}else { 
window.onload = function() { 
oldonload(); 
fn(); 
} 
} 
} 
 
它非常完美地解决了互相覆盖的问题，用法如下： 
 代码如下:
loadEvent(func1); 
loadEvent(func2); 
loadEvent(func3); 
//更多加载事件 
 
但现实的问题总是如此出奇不意，也如此刁钻邪门。最近我想把所有的函数放到一个闭包中，以免除命名冲突之苦，比如那个有名的$的DOM选择器。JQuery，Prototype，mootool都用它做选择器的名字，共存成了个严重的问题。 
 代码如下:
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var onReady = function(fn){ 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = fn; 
}else { 
window.onload = function() { 
oldonload(); 
fn(); 
} 
} 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 
 
 
<!doctype html> 
<html dir="ltr" lang="zh-CN"> 
<head> 
<meta charset="gb2312"/> 
<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; 
if (typeof window.onload != 'function') { 
window.onload = fn; 
}else { 
window.onload = function() { 
oldonload(); 
fn(); 
} 
} 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 
JS.onReady(function(){ 
var $ = JS.$; 
try{ 
alert($("test").innerHTML); 
}catch(e){ 
alert(e); 
} 
}) 
</script> 
</head> 
<body> 
<p id="test">Test</p> 
</body> 
</html> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
不过像这个如此有名的函数其实还有一个缺陷，就是新加载的函数被放置于前一个加载函数的作用域之用，加载函数越多，其栈的层次越深，显然性能耗很大。不过像onclick,onload,onmouseout等这样函数，W3C把它们归属于DOM0的事件模型，好处是适用范围广，但签于其性能，于是又提出DOM1.0的事件模型与DOM2.0的事件模型，DOM2就是原微软的事件模型与原网景的事件模型的合璧，既能捕获又能冒泡，而且多绑定多类型事件而不会导致后者覆盖前者。于是人们总搞出了有名的addEvent函数出来，我们用addEvent来改造我们的事件加载。 
 代码如下:
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var addEvent = function( obj, type, fn ) { 
if (obj.addEventListener) 
obj.addEventListener( type, fn, false ); 
else if (obj.attachEvent) { 
obj["e"+type+fn] = fn; 
obj.attachEvent( "on"+type, function() { 
obj["e"+type+fn](); 
} ); 
} 
}; 
var onReady = function(loadEvent,waitForImages) { 
if(waitForImages) { 
return addEvent(window, 'load', loadEvent); 
} 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 
 
 
<!doctype html> 
<html dir="ltr" lang="zh-CN"> 
<head> 
<meta charset="gb2312"/> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
<title>闭包环境中的事件加载</title> 
<script type="text/javascript"> 
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var addEvent = function( obj, type, fn ) { 
if (obj.addEventListener) 
obj.addEventListener( type, fn, false ); 
else if (obj.attachEvent) { 
obj["e"+type+fn] = fn; 
obj.attachEvent( "on"+type, function() { 
obj["e"+type+fn](); 
} ); 
} 
}; 
var onReady = function(loadEvent,waitForImages) { 
if(waitForImages) { 
return addEvent(window, 'load', loadEvent); 
} 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 

JS.onReady(function(){ 
alert(JS.$("test").innerHTML) 
},true); 
JS.onReady(function(){ 
alert("dddddddddddddddd") 
},true); 
</script> 
</head> 
<body> 
<p id="test">Test</p> 
</body> 
</html> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
OK，没问题。上面的onReady函数有一个可选参数，用于是否待图片加载。我们知道JS引擎会在完成DOM树后才开始处理图片与音频等东西，但如果我们的页面严重依赖于脚本布局呢？！我们想尽快让页面呈现出大体形态，这就用到domReady了。我们在原基础上改进它。 
 代码如下:
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var addEvent = function( obj, type, fn ) { 
if (obj.addEventListener) 
obj.addEventListener( type, fn, false ); 
else if (obj.attachEvent) { 
obj["e"+type+fn] = fn; 
obj.attachEvent( "on"+type, function() { 
obj["e"+type+fn](); 
} ); 
} 
}; 
var onReady = function(loadEvent,waitForImages) { 
if(waitForImages) { 
return addEvent(window, 'load', loadEvent); 
} 
var init = function() { 
if (arguments.callee.done) return; 
arguments.callee.done = true; 
loadEvent.apply(document,arguments); 
}; 
if(!+"\v1"){ 
(function(){ 
try { 
document.documentElement.doScroll("left"); 
} catch(e) { 
setTimeout( arguments.callee, 0 ); 
return; 
} 
init(); 
})(); 
}else{ 
document.addEventListener( "DOMContentLoaded", function(){ 
document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); 
init(); 
}, false ); 
} 
return true; 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 
 
dom标准浏览器用DOMContentLoaded，这是非常正现的W3C论DOM方法，与FF的DOMMouseScroll 不一样，基本上所有非IE内核的浏览器最新版都支持它了。IE下我们可以通过侦听document. documentElement. doScroll()来判断DOM树是否完成，原理是IE下只有当DOM树构建完成后才能doScroll。但它还不是尽善尽美，它在IE下无法判定 iframe的内容是否加载完毕。我们继续改进它。 
 代码如下:
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var addEvent = function( obj, type, fn ) { 
if (obj.addEventListener) 
obj.addEventListener( type, fn, false ); 
else if (obj.attachEvent) { 
obj["e"+type+fn] = fn; 
obj.attachEvent( "on"+type, function() { 
obj["e"+type+fn](); 
} ); 
} 
}; 
var onReady = function(loadEvent,waitForImages) { 
if(waitForImages) { 
return addEvent(window, 'load', loadEvent); 
} 
var init = function() { 
if (arguments.callee.done) return; 
arguments.callee.done = true; 
loadEvent.apply(document,arguments); 
}; 
if(!+"\v1"){ 
if(window.self == window.top){ 
(function(){ 
try { 
document.documentElement.doScroll("left"); 
} catch(e) { 
setTimeout( arguments.callee, 0 ); 
return; 
} 
init(); 
})(); 
}else{ 
document.attachEvent("onreadystatechange", function(){ 
if ( document.readyState === "complete" ) { 
document.detachEvent( "onreadystatechange", arguments.callee ); 
init(); 
} 
}); 
} 
}else{ 
document.addEventListener( "DOMContentLoaded", function(){ 
document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); 
init(); 
}, false ); 
} 
return true; 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 
 
我们简直是在重新实现jquery的$(document).ready(function(){ })！它功能非常强悍，配合利用闭包做成的命名空间，基本刀枪不入。而且它就只污染一个全局变量“JS”，可以与YUI媲美了（笑）。不过对于一般应用来说，我们用不着做到如此面面俱到。假如我们不需要对图片进行处理，页面也没有iframe，我们可以搞下面这个微缩版出来。 
 代码如下:
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var onReady = function(loadEvent) { 
if(!+"\v1"){ 
(function(){ 
try { 
document.documentElement.doScroll("left"); 
} catch(e) { 
setTimeout( arguments.callee, 0 ); 
return; 
} 
loadEvent(); 
})(); 
}else{ 
document.addEventListener( "DOMContentLoaded", loadEvent, false ); 
} 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})()

内容总结

以上是互联网集市为您收集整理的javascript 事件加载与预加载全部内容，希望文章能够帮你解决javascript 事件加载与预加载所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/372182.html

来源：【匿名】

【上一篇】javascript 处理事件绑定的一些兼容写法【下一篇】javascript 怎么调用php方法

更多 ►

【javascript 事件加载与预加载】教程文章相关的互联网学习教程文章

jQuery $(document).ready()和JavaScript onload事件【代码】【图】

jQuery $(document).ready()和JavaScript onload事件 jQuery $(document).ready()和window.onload　　根据ready()方法的API说明http://api.jquery.com/ready/　　这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded.　　即当DOM加载完毕的时候,执行这个指定的方法.　　因为只有document的状态ready之后,对page的操作才是安全的.$(document).ready()仅在...

JavaScript事件【代码】

目录一、DOM0级事件处理二、事件冒泡与事件捕获三、DOM2级事件处理四、IE事件处理程序及跨浏览器支持五、事件对象一、DOM0级事件处理事件，由WEB页面中发生的一些特定行为触发。比如在某个页面元素上按下鼠标左键，按下键盘某个按键，某对象获得或丢失焦点时均会触发对应的事件。JavaScript和HTML的交互就是通过事件来实现的。我们使用事件侦听器对事件进行“注册”，事件发生时便执行相应的代码。DOM0级事件处理程序以其简单、跨浏...

javascript和jquey的自定义事件小结【代码】【图】

“通过事件机制，可以将类设计为独立的模块，通过事件对外通信，提高了程序的开发效率。” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好对象之间通过直接方法调用来交互1）对象A直接调用对象B的某个方法，实现交互；直接方法调用本质上也是属于一种特殊的发送与接受消息，它把发送消息和接收消息合并为一个动作完成；方法调用方和被调用方被紧密耦合在一起；因为发送消息和接收消息是在一个动作内完成，所以无...

Javascript中点击（click）事件的3种写法【代码】

方法一<!DOCTYPE html> <html> <head><title>Javascript中点击事件方法一</title> </head> <body><button id="btn">click</button><script type="text/javascript">var btn = document.getElementById("btn");btn.onclick=function(){alert("hello world");}</script> </body> </html> 方法二<!DOCTYPE html> <html> <head><title>Javascript中点击事件方法二</title> </head> <body><button id="btn">click</button><script type=...

javascript事件对象

把多个JavaScript函数绑定到onload事件处理函数上

为了让函数只在页面加载完毕后才得到执行，我们会把函数绑定到onload事件上：window.onload = userFunction但如果有两个函数：firstFunction() 和 secondFunction()，都想让它们在页面加载完毕后得到执行，该怎么办？如果这样： window.onload = firstFunciton; window.onload = secondFunction;只有最后一个函数能被执行。由此可得：每个事件处理函数只能绑定一条指令。但我们可以这样做： window.onload = function...

Javascript事件【代码】

Javascript包含三种模型：内联模型、脚本模型和DOM2模型。1.内联模型（现在基本不用了）　　即事件响应处理函数作为一个标签属性来执行，典型的就是onclick()函数；<input type=‘button‘ value=‘按钮‘ onclick="alert(‘点击了！‘)" /> 2.脚本模型　　为了解决html与javascript的分离。window.onload=function(){var input=document.getElementByTagName(‘input‘)[0];input.onclick=function(){alert("点击了！");} }PS：也...

javascript监听事件兼容【代码】

JavaScript 同步异步及事件轮询详解【代码】

JS为何是单线程的？ JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。（在JAVA和c#中的异步均是通过多线程实现的，没有循环队列一说，直接在子线程中完成相关的操作）JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假...

深入理解JavaScript的闭包特性如何给循环中的对象添加事件

初学者经常碰到的,即获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。原因是初学者并未理解JavaScript的闭包特性。有个网友问了个问题，如下的html，为什么点击所有的段落p输出都是5，而不是alert出对应的0，1，2，3，4。1. <!DOCTYPE HTML>2. <html>3. <head>4. <meta charset="utf-8" />5. <title>闭包演示</title>6. <style type="text/css"...

javascript---事件对象【代码】

事件对象event　　如果是事件处理函数绑定的函数，浏览器会默认传递一个参数，event对象。而这个对象会根据触发的事件判断是鼠标事件还是键盘事件 //鼠标事件1 document.onclick=function(evt){ 2 alert(evt); //键盘事件3 }//键盘事件1 document.onkeydown=function(evt){ 2 alert(evt); //键盘事件3 } 由于IE浏览器和W3C浏览器获取event对象有不兼容的地方，所以...

JavaScript进阶系列06,事件委托【代码】

在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制。现在需要使用这个事件处理机制为页面元素注册事件方法。 □ 点击页面任何部分触发事件创建一个script1.js文件。(function() {eventUtility.addEvent(document, "click", function(evt) {alert(‘hello‘);}); }()); 页面部分。<head> <meta http-equiv="Content-Type" content="text/html; ...

Javascript----input事件实现动态监听textarea内容变化【代码】【图】

1、代码<!DOCTYPE html> <html><head><title>textarea输入文字监听</title> </head><body><textarea id=‘text‘ maxlength="50" style="width: 400px; height: 200px;"></textarea><span id=‘sp‘></span><script type="text/javascript">var val = document.getElementById("text");var tar = document.getElementById(‘sp‘);console.log(tar);val.addEventListener("input", function(e) {var t = this.value;console.log(t)...

javascript 事件绑定【代码】【图】

一、最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。事件属性名称由事件类型外加一个“on”前缀构成。这些属性也被称为事件处理器<INPUT TYPE="text" NAME="first_name" onChange="convertToUpper(this)">或者<INPUT TYPE="text" NAME="first_name" onChange="javascript : js code">或者Dom.onclick = function(e){ //todo }二、js方法绑定事件1、dom对象的attachEvent()方法给该dom元素的事件（该方法仅支...

Javascript高级编程学习笔记（60）—— 事件（4）事件类型

事件类型Web浏览器中可能发生的事件有许多种类型不同类型的事件都有着自己独特的信息在“DOM3级事件”规范中，规定了以下几类事件：UI事件当用户与页面元素交互时触发焦点事件当元素失去或获得焦点时触发鼠标事件当用户通过鼠标在页面上执行操作时触发滚轮事件当使用鼠标滚轮或类似设备时触发文本事件当在文档中输入文本时触发键盘事件当用户通过键盘在页面执行操作时触发合成事件当为IME（输入法编辑...

首页 / JAVASCRIPT / javascript 事件加载与预加载

javascript 事件加载与预加载

内容导读

内容图文

内容总结

内容备注

内容手机端

【javascript 事件加载与预加载】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

加载 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程