window. 是指当页面加载完后执行的函数 但是这个函数有个缺点 就是不能执行多个window.onload 当第二次调用window. 第二次会覆盖第一次的函数 如下代码:
- <style>
- .small{ width:100px;height:100px;border:2px solid red; background:#906;}
- .big{ width:200px; height:200px;border:2px solid red; background:#906;}
- </style>
- <div id="small" class="small">aaaa</div>
- <script>
- window.onload = initAll;
- function initAll(){
- var oo = document.getElementById("small");
- oo.onclick = toBig;
- function toBig(){
- oo.className = "big";
- oo.onclick = tosmall;
- }
- function tosmall(){
- oo.className = "small";
- oo.onclick = toBig;
- }
- }
- </script>
这上面的js代码 我是测试 一张图片时候 图片变大 当我再点击时候 图片变小类似效果!改变他们的类!但是当我底部又有一个window. 就是第二次的window. 就会覆盖第一次的 比如<script>window. function(){alert(1)}</script> 都可以测试下,但是现在的问题是该怎么解决这个问题呢!恩 可以先判断下 看看上面是否已经定义了这个函数 如果定义的话 那么我让他先保存一个变量中,然后当执行下个函数时候 再去执行它!这样就可以二个函数一起执行呢!1 先判断下 如下代码:
- <script>
- var temp ;
- //window.
- if(typeof window.onload == "function"){
- //让当前的函数保存在一个变量中
- temp = window.
- }
- window.onload = function(){
- //那么现在我想不但要想执行我这个当前的函数 那么上面的函数也要执行到 所以要调用下上面的函数
- alert("我是最后一次执行到");
- temp();
- }
- //上面的代码都可以执行到 但是现在我们要封装一个方法 addEvent
- </script> -->
但是如果页面上有多个这样的事件监听函数时候 我们用这种方式 也并不是很方便 我们可以先封装一个函数 然后再调用它 ! 这个函数定义三个参数 第一个是“当前的对象obj” 第二个是"evt 事件类型",第三个是函数"fn",定于代码如下:
- <script>
- // window.
- function addEvent(obj,evt,fn){
- // 现在要想的问题是 要给某个对象注册多次事件监听函数
- //检测当前的事件是否存在
- var saved;
- if( typeof obj["on" + evt] =="function"){
- saved = obj["on" + evt];
- }
- obj["on"+evt] = function(){
- if(saved) saved();
- fn();
- }
- }
- </script>
综合上面的所示:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <style>
- .small{ width:100px;height:100px;border:2px solid red; background:#906;}
- .big{ width:200px; height:200px;border:2px solid red; background:#906;}
- </style>
- <script>
- // window.onload = initAll;
- function addEvent(obj,evt,fn){
- // 现在要想的问题是 要给某个对象注册多次事件监听函数
- //检测当前的事件是否存在
- var saved;
- if( typeof obj["on" + evt] =="function"){
- saved = obj["on" + evt];
- }
- obj["on"+evt] = function(){
- if(saved) saved();
- fn();
- }
- }
- </script>
- </head>
- <body>
- <div id="small" class="small">aaaa</div>
- <script>
- function initAll(){
- var oo = document.getElementById("small");
- oo.onclick = toBig;
- function toBig(){
- oo.className = "big";
- oo.onclick = tosmall;
- }
- function tosmall(){
- oo.className = "small";
- oo.onclick = toBig;
- }
- }
- addEvent(window,"load",initAll);
- </script>
- <!-- <script>
- var temp ;
- //window.onload = function(){} //这样的话会覆盖掉上面的函数 那么现在的问题是应该我们检测下 是否已经给某个对象注册了事件
- if(typeof window.onload == "function"){
- //让当前的函数保存在一个变量中
- temp = window.
- }
- window.onload = function(){
- //那么现在我想不但要想执行我这个当前的函数 那么上面的函数也要执行到 所以要调用下上面的函数
- alert("我是最后一次执行到");
- temp();
- }
- //上面的代码都可以执行到 但是现在我们要封装一个方法 addEvent
- </script> -->
- <script>
- function test(){
- alert(1);
- }
- addEvent(window,"load",test);
- </script>
- </body>
- </html>
像上面这样运行代码 可以给某个对象注册多个监听函数!
本文转自 涂根华 51CTO博客,原文链接:http://blog.51cto.com/tugenhua/743067,如需转载请自行联系原作者