首页 > 代码库 > JavaScript事件设计模式

JavaScript事件设计模式

2024-07-12 03:41:28   223人阅读

本文章参考自：《征服Ajax Web 2.0 开发技术详解》为了自己日后查阅并与大家共享。

 

1. 事件设计概述

    事件机制可以是程序逻辑更加清晰可见，在JavaScript中很多对象都有自己的事件，如：button有onclick事件，selcet有onchange事件。对于我们自己设计的类，是否也可以有事件机制呢？答案是肯定的。我们可以通过事件机制，将类设计为独立的模块，从而使其可以通过事件与外通信，提高程序的开发效率。

2. 不带参数的事件设计模式

    最简单的一种模式是将一个类的方法成员定义为事件，可以借助JavaScript的基本语法来实现，通常是一个空的方法。例如：

 

Js代码  收藏代码
  1. <script language="javascript" type="text/javascript" >  
  2.   
  3. function User(){  
  4. }  
  5. User.prototype={  
  6.     show:function(){  
  7.         this.onShow();//触发onShow事件  
  8.     },  
  9.     onShow:function(){}//定义事件接口  
  10. }  
  11. var obj = new User();  
  12. //创建obj的onShow事件处理程序  
  13. obj.onShow = function(){  
  14.     alert("事件触发了");  
  15. }  
  16. //调用obj的show方法  
  17. obj.show();  
  18. </script>  

     obj.onShow 方法在类的外部被定义，在类的内部方法 show() 中被调用，这就实现了事件机制。

    此设计模式应用起来简单，但有其有以下缺点：

  • 不能够给事件处理程序传递参数，原因是我们是在 show() 这个内部方法中调用事件处理程序的，无法知道外部的参数。
  • 每个事件接口只能绑定一个事件处理程序，而内部方法则可以使用 attachEvent 或 addEventListener 方法绑定多个处理程序。

3. 给事件处理程序传递参数

    给事件处理程序传递参数不仅是自定义事件中存在的问题，也是系统内部对象的事件机制中存在的问题，因为事件机制仅传递一个函数名称，不带有任何参数信息，所以无法传递参数进去。例如：

Js代码  收藏代码
  1. <script language="javascript" type="text/javascript" >  
  2. function User(){  
  3. }  
  4. User.prototype={  
  5.     show:function(){  
  6.         this.onShow();//触发onShow事件  
  7.     },  
  8.     onShow:function(){}//定义事件接口  
  9. }  
  10. var obj = new User();  
  11. //创建obj的onshow事件处理程序  
  12. function objOnShow(userName){  
  13.     alert("hello,"+userName);  
  14. }  
  15. //定义username变量  
  16. var userName = "plkong";  
  17. //绑定obj的onshow事件  
  18. obj.onShow = objOnShow;//无法将userName这个变量传递进去  
  19. obj.show();  
  20. </script>  

  上面的程序是无法传递参数进去的，为了解决这个问题，我们可以从相反的思维方式去考虑问题。不考虑怎么把参数传递进去，而是考虑如何构建一个无需参数的事件处理程序。我们看看先看看下面的函数：

Js代码  收藏代码
  1. /* 将参数的函数封装为无参数的函数 */  
  2. function createFunction(obj, strFunc){  
  3.     var args = [];//定义args用于存储传递给事件处理程序的参数  
  4.     if(!obj) obj = window;//如果是全局函数则obj = window;  
  5.     //得到传递给事件处理程序的参数  
  6.     for( var i = 2; i<arguments.length; i++)  
  7.         args.push(arguments[i]);  
  8.     //用无参函数封装事件处理程序的调用  
  9.     /* 
  10.     JavaScript为函数对象定义了两个方法：apply 和 call， 它们的作用都是函数绑定到另外一个对象上运行。 
  11.     */  
  12.     return function(){  
  13.         obj[strFunc].apply(obj, args);//将参数传递给指定的事件处理程序  
  14.     }  
  15. }  

 该方法将一个有参数的函数封装为一个无参数的函数，不仅对全局函数适用，作为对象方法存在的函数也是适用的。该方法首先接收两个参数：obj 和 strFunc ，obj 表示事件处理程序所在的对象； strFunc 表示事件处理程序的名称。程序中还利用了arguments对象（arguments是传递给函数的隐含参数，arguments对象存储的是实际传递给函数的参数，而且不局限与函数声明所定义的形参列表。关于arguments对象可以参考其他资料）处理第二个参数以后的隐式参数，即未定义为形参的参数，

    例如：事件处理程序

    someObject.eventHandler = function(_arg1, _arg2){

                   //事件处理代码

}

    应该调用：creatFunction(someObject, "eventHander", arg1, arg2);

    这样就返回一个无参数的函数，在返回的函数中已经包括了传递进去的参数。如果是全局函数作为事件处理程序，事实上它是window 对象的一个方法，所以可以传递window对象作为obj参数，为了更清晰一点，也可以指定obj为null， creatFunction函数内部会自动认为该函数是全局函数，从而自动吧obj赋值为window。最后完成的代码如下：

 

Js代码  收藏代码
  1. <script language="javascript" type="text/javascript" >  
  2. /* 将参数的函数封装为无参数的函数 */  
  3. function createFunction(obj, strFunc){  
  4.     var args = [];//定义args用于存储传递给事件处理程序的参数  
  5.     if(!obj) obj = window;//如果是全局函数则obj = window;  
  6.     //得到传递给事件处理程序的参数  
  7.     for( var i = 2; i<arguments.length; i++)  
  8.         args.push(arguments[i]);  
  9.     //用无参函数封装事件处理程序的调用  
  10.     /* 
  11.     JavaScript为函数对象定义了两个方法：apply 和 call， 它们的作用都是函数绑定到另外一个对象上运行。 
  12.     */  
  13.     return function(){  
  14.         obj[strFunc].apply(obj, args);//将参数传递给指定的事件处理程序  
  15.     }  
  16. }  
  17. /**/  
  18. function User(){  
  19. }  
  20. User.prototype={  
  21.     show:function(){  
  22.         this.onShow();//触发onShow事件  
  23.     },  
  24.     onShow:function(){}//定义事件接口  
  25. }  
  26. var obj = new User();  
  27. //创建obj的onshow事件处理程序  
  28. function objOnShow(userName){  
  29.     alert("hello,"+userName);  
  30. }  
  31. //定义username变量  
  32. var userName = "plkong";  
  33. //绑定obj的onshow事件  
  34. //obj.onShow = objOnShow;//无法将userName这个变量传递进去  
  35. obj.onShow = createFunction(null, "objOnShow", userName);  
  36. obj.show();  
  37. </script>  

 


联系
我们