YUI 3 学习笔记：event

Dear 丶 2022-08-06 15:26 9阅读 0赞

event 模块包括 event, event-custom, event-simulate 三部分，类图如下：  
[![yui-event-thumb.png][] ][yui-event-thumb.png_]

1.  Event 类的调用融合在 Node 中，和 Loader 与 YUI().use 的关系类似。
2.  任何对象，只要扩展 EventTarget 接口，就自动具有了一套事件管理机制。使用很简单：
    
        YUI().use('event', function(Y) {
             
        
            function Pig() {
             
        
                // 公布事件
        
                this.publish('farting', {
             
        
                    emitFacade: true,
        
                    defaultFn: function() {
             
        
                        alert('猪猪放屁啦');
        
                    }
        
                });
        
            }
        
            Pig.prototype.fart = function() {
             
        
                // 触发事件
        
                this.fire('farting');
        
            };
        
            Y.augment(Pig, Y.EventTarget);
        
        
        
            var pig = new Pig();
        
            // 订阅事件
        
            pig.on('farting', function(e) {
             
        
                e.preventDefault();
        
                alert('小猪猪乖，不放屁');
        
            });
        
            pig.fart();
        
        });
3.  CustomEvent 很完整的实现了一套事件管理机制，对象的冒泡、立即停止、订阅器的先进先出和取消执行等等，YUI 3 都支持。
4.  Do 实现了一套简单的 AOP 机制。
5.  DOMEventFacade 对原生 e 做了封装，使用起来更自然，很舒服。
6.  Y.Env.evt.plugins 是事件处理的扩展钩子。在 YUI 3 的代码中，这种扩展和分离机制用得比较多。

快乐学习，欢迎讨论。

[yui-event-thumb.png]: http://lifesinger.org/blog/wp-content/uploads/2009/07/yui-event-thumb.png
[yui-event-thumb.png_]: http://lifesinger.org/blog/wp-content/uploads/2009/07/yui-event.png