JS模仿AS3事件机制

Question

练习下自定义事件的实现，想让JS可以用AS3的语法使用自定义事件，实现很简单，因为没考虑复杂的情况吧。试过后发现有些地方还是模仿不了，最主要不一样的地方是：

1.侦听函数没法自动绑定那个函数所在的object，必须手动把object传进去，像这样：dispatcher.addEventListener(SampleDispatcher.ACTION, e.action, e);
最后还要传“e”这个obj进去，否则函数action里的this不指向e

2.使用的时候继承十分麻烦，还得小心翼翼，看demo就知道了。

1. //事件发送者类
2. var EventDispatcher = function() {
3.         this.listeners = {};
4. }
5. EventDispatcher.prototype = {
6.         addEventListener: function(type, fn, obj) {
7.                 if (!fn) {
8.                         throw new Error("function no found");
9.                 }
11.                 if (!this.listeners[type]) {
12.                         this.listeners[type] = [];
13.                 }
15.                 var lis = this.listeners[type];
16.                 if (!lis) {
17.                         lis = [];
18.                 }
19.                 lis.push({"fn": fn, "obj": obj});
20.         },
22.         dispatchEvent: function(event) {
23.                 var lis = this.listeners[event.type];
24.                 if (lis && lis.length) {
25.                         for (var i=0; i<lis.length; i++) {
26.                                 event.target = this;
27.                                 lis[i].fn.call(lis[i].obj, event)
28.                         }
29.                 }
30.         },
32.         removeEventListener: function(type, fn, obj) {
33.                 var lis = this.listeners[type],
34.                         ret = false;
36.                 if (!lis) {
37.                         return false;
38.                 }
40.                 for (var i=lis.length-1; i>-1; i--) {
41.                         if (!fn || (lis[i].fn == fn && lis[i].obj == obj)) {
42.                                 delete lis[i];
43.                                 lis.splice(i, 1);
44.                                 ret = true;
45.                         }
46.                 }
48.                 if (!lis.length) {
49.                         delete this.listeners[type];
50.                 }
52.                 return ret;
53.         },
55.         hasEventListener: function(type) {
56.                 var lis = this.listeners[type]
57.                 return lis && lis.length > 0 ? true: false;
58.         }
59. }
61. //事件类
62. var Event = function(type) {
63.         this.type = type;
64.         this.target = null;
65. }
66. Event.prototype = {
67.         toString: function(){
68.                 return this.type;
69.         },
71.         //clone功能未完善
72.         clone: function(){
73.                 return new Event(this.type);
74.         }
75. }

复制代码完全仿照《Actionscript3殿堂之路》里事件发送和处理的例子，写了个demo:

1. //输出
2. var trace = function(msg) {
3.     document.write("<p>" + msg + "</p>");
4. }
6. //OrderEvent事件类
7. var OrderEvent = function(type) {
8.     OrderEvent.superclass.constructor.call(this, OrderEvent.ORDER_DISHES);
9.     this.dishes = [];
10. }
11. YAHOO.extend(OrderEvent, Event);
12. OrderEvent.ORDER_DISHES = "order";
14. //服务生Waiter类
15. var Waiter = function() {}
16. Waiter.prototype.replyOrderFood = function(event) {
17.     trace("你好," + event.target.name + "!你点的菜是:"+ event.dishes);
18.     trace("我马上吩咐厨房去做");
19. }
21. //客人类Customer
22. var Customer = function(name) {
23.     Customer.superclass.constructor.call(this);
24.     this.name = name;
25. }
26. YAHOO.extend(Customer, EventDispatcher);
27. Customer.prototype.order = function(dishes) {
28.     var orderDish = new OrderEvent();
29.     orderDish.dishes = dishes? dishes: ["农家小炒", "麻婆豆腐", "烤鱿鱼"];
30.     this.dispatchEvent(orderDish);
31. }
33. //生成客人和湘缘服务员
34. var bang = new Customer("bang"),
35.     xiangyuanWaiter = new Waiter();
37. //注册侦听器，讲服务员的replyOrderFood()方法注册为侦听“order”事件的侦听器
38. bang.addEventListener(OrderEvent.ORDER_DISHES, xiangyuanWaiter.replyOrderFood, xiangyuanWaiter);
39. //俺点菜了，菜单在俺这个类里面
40. bang.order();
41. //再点次菜，点些饮料
42. bang.order(["鸡尾酒","咖啡"]);
43. //吃完饭，移除侦听器
44. bang.removeEventListener(OrderEvent.ORDER_DISHES, xiangyuanWaiter.replyOrderFood, xiangyuanWaiter);

复制代码