javascript的事件加载
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>
运行代码
报错，说找不到节点。为什么找不到呢？因为我们在调用它的时候，DOM树还没有建立起来！不会吧，网页是如此完整地显示我们眼前了。这与闭包的运作有关，当JS引擎解析到闭包的最后一个“}”，就把里面的东西锁到一个密封的环境中，JS继续向下执行，就修正不了闭包中的window的属性了。window有一个出名的属性，叫做document，它引用着整个DOM树(当然还有其他操作)。DOM树是一个复杂的键值对，当JS不断向下解析时，就不断往document添加相应的节点。但当它塞进闭包后，里面的时间就静止了，因此它还停留在解析head的阶段，document是残缺的，想获取body中的节点，当然是返回null了。于是问题的关键是如何让闭包内的document重新继续向下解析。 方法有两个，一个是利用侦听器(addEventListener与attachEvent)，一个是利用基于时间轴的setTimeout与setInterval。
01.(function(){
02.
if(!window.JS){
03.
window['JS'] = {}
04.
}
05.
var addEvent = function( obj, type, fn ) {
06.
if (obj.addEventListener)
07.
obj.addEventListener( type, fn, false );
08.
else if (obj.attachEvent) {
09.
obj["e"+type+fn] = fn;
10.
obj.attachEvent( "on"+type, function() {
11.
obj["e"+type+fn]();
12.
} );
13.
}
14.
};
15.
var onReady = function(loadEvent,waitForImages) {
16.
if(waitForImages) {
17.
return addEvent(window, 'load', loadEvent);
18.
}
19.
}
20.
JS.onReady = onReady;
21.
var $ = function(id){
22.
return document.getElementById(id);
23.
}
24.
JS.$ = $;
25.})()<!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'] = {}
上一页 [1] [2] [3] [4] [5] [6] 下一页