在一个事件上绑定多个函数

 昨天晚上，我的朋友"加班苏"（因为老加班，呵呵）问我一个问题：他需要
在window.onload事件上绑定两个函数，但只能成功绑定一个。他的代码如下：
    // 有两个函数 foo1() 和 foo2()
    window.onload = foo1;
    window.onload = foo2;
运行结果是，只有foo2()函数被执行了。但本意是要先执行完foo1()，再执行foo2()。

 

 

以下是我分析和解决的过程：

 

分析：他的代码之所以行不通，是因为第二次指定的函把第一次指定的函数替换
掉了，就相当于：
    var xx; // 在JavaScript中，函数也是一个对象，也可以赋给一个变量
    xx = foo1;
    xx = foo2;

 

解决问题的思路：如果想在一个件上绑定两个函数，foo1()和foo2()，可以先声
明一个函数bar()：
   function bar(){
  foo1();
  foo2()
   }
然后绑定bar()函数到事件上：
   window.onload = bar;

 

扩展：这样的前提是事先知道有多少个函数要绑定，但如果不知道呢？那就可以
用下面这个方法：先写一个函数 binding(eventType, func) 用于绑定一个函数到
指定的事件上：
        /**
         * 绑定一个事件处理函数到指定的事件上。
         *
         * @param eventType 要绑定函数的事件，
         *                  如window.onload代表浏览器装载完文档后触发的事件
         * @param func      要绑定的函数
         */
        function binding(eventType, func)
        {
            if (!window.onload) {
                // 如果还未绑定函数，就可以直接绑定
                window.onload = func;
            }
            else
            {   // 如果已经绑定了，就绑定一个匿名函数，作用是：
                // 先调用原绑定的函数，再调用本次将要绑定的函数
                var old = window.onload;
                window.onload = function(){
                    old();
                    func();
                }
            }
        }
然后，每次想往某个事件上绑定事件时，都调用这个函数来绑定就可以了：
        binding(window.onload, foo1);
        binding(window.onload, foo2);

 

呵呵，这是方法是看FCKeditor的源码时学到的。