imggm 2009-06-16 01:00
浏览 168
已采纳

請問YUI 3 如何創建自定義事件?

var $CE = YAHOO.util.CustomEvent;
這句是創建自定義事件的對象吧,這個是YUI 2 的寫法,YUI 3 應該如何寫呢?

  • 写回答

2条回答 默认 最新

  • zhoujuan520 2009-06-16 06:34
    关注

    [size=large]添加事件监听[/size]
    向结点(或结点列表)绑定事件:
    [code="js"]Y.on('click', handleClick, '#foo', this, arg1, arg2, arg3);
    Y.on('click', handleClick, ['#foo1 a', '#foo2 a'], this, arg1, arg2, arg3);[/code]

    [code="js"]Y.all('#foo1 a').on('click', handleClick);[/code]

    [size=large]删除事件[/size]
    [code="js"]Y.detach('click', handleClick, '#foo');[/code]

    [code="js"]var fooClickHandle = Y.on('click', handleClick, '#foo', this, arg1, arg2, arg3);
    fooClickHandle.detach();[/code]
    删除结点上所有绑定的事件:
    [code="js"]Y.Event.purgeElement('#foo');[/code]
    删除结点及它的子结点上所有绑定的事件:
    [code="js"]Y.Event.purgeElement('#foo', true);[/code]
    只删除结点上绑定的click事件:
    [code="js"]Y.Event.purgeElement('#foo', false, 'click');[/code]

    [size=large]模拟事件[/size]
    YUI 3.x这次提供了模拟事件,很有意思。目前支持模拟下面的事件:

    * click
    * dblclick
    * mousedown
    * mouseup
    * mouseover
    * mouseout
    * mousemove
    

    [size=large]
    摸拟点击一个button:[/size]
    [code="js"]Y.Event.simulate(document.getElementById('bn-submit'), 'click'); //参数1,必须为原生结点[/code]
    [size=large]同时按着Ctrl键:[/size]
    [code="js"]Y.Event.simulate(document.getElementById('bn-submit'), 'click', {ctrlKey: true});[/code]

    [size=large]摸拟mouseover一个DIV:[/size]
    [code="js"]Y.Event.simulate(document.getElementById('map'), 'mouseover');[/code]
    [size=large]同时指定相关目标结点:[/size]
    [code="js"]Y.Event.simulate(document.getElementById('map'), 'mouseover', {relatedTarget: document.body});[/code]
    [size=large]同时指定mouseover的坐标:[/size]
    [code="js"]Y.Event.simulate(document.getElementById('map'), 'mouseover', {clientX: 100, clientY: 100});[/code]
    [size=large]
    模拟键盘事件
    目前支持摸拟下面的键盘事件:[/size]

    * keyup
    * keydown
    * keypress
    

    [code="js"]Y.Event.simulate(document.getElementById('map'), 'keydown', {keyCode: 97}); //在div#map上摸拟按下'A'键。keyCode的值也支持代码名:ctrlKey, altKey, shiftKey 和 metaKey。[/code]

    [size=large]渲染周期事件[/size]
    available事件
    检测一个结点加到DOM树上被执行。如:
    [code="js"]Y.on('available', handleOnAvailable, '#foo');
    Y.get('body').appendChild(Y.Node.create('

    ...something...
    '));[/code]

    [size=large]contentready事件[/size]
    文档上说是结点的内容完全下载完后被执行,依据目标结点的nextSibling结点是否有效。由于过程很快,测试中没看出跟available事件有什么区别。

    [size=large]domready事件[/size]
    页面在渲染时,一旦DOM树处于可用状态,此事件将被执行。现在通常用domready替代window的load事件。
    [code="js"]Y.on('domready', init);[/code]

    [size=large]键盘事件
    监听在任意元素上的键盘动作:[/size]
    [code="js"]Y.on('key', handleKeyDown, '#foo', 'down:13');
    Y.on('key', handleKeyDown, '#foo', 'down:65,66');
    Y.on('key', handleKeyDown, '#foo', 'down:65,66+shift+ctrl', this, arg1, arg2);[/code]
    第4个参数的格式为“键盘事件:keycode[+shift+ctrl+alt+meta]”。

    [size=large]focus和blur事件[/size]
    IE和W3C对这两个事件的支持是不同的。近期PPK在yahoo做的一个培训详细介绍过这两件事件,详细请参考这个链接:http://www.quirksmode.org/blog/archives/2009/04/yahoo_presentat.html
    用法:
    [code="js"]Y.on('focus', handleFocus, '#foo a');
    Y.on('blur', handleBlur, '#foo a');
    [/code]
    [size=large][color=red]自定义事件[/color][/size]
    YUI 2.x的自定义事件让开发变得很灵活,而YUI 3.x的自定义事件则更加强大。
    官方的介绍“自定义事件具有能冒泡、能取消和内在AOP的特质”。(什么是AOP?参考:http://en.wikipedia.org/wiki/Aspect-oriented_programming)
    Satyen Desai在“YUI3的设计目标和框架”中分析过YUI 3自定义事件的机制。

    看看如何:
    [code="js"]var publisherFactory = function(){
    this.publish('event1');
    this.publish('event2');
    };

    Y.augment(publisherFactory, Y.Event.Target);

    var publisher = new publisherFactory();

    publisher.subscribe('event1', function(){
    Y.log('event 1');
    });

    publisher.fire('event1');[/code]

    在发布自定义事件同时定义默认处理方法:
    [code="js"]var defHandleEvent = function(){
    Y.log('default event handler');
    };
    this.publish('event1', {defaultFn: defHandleEvent});[/code]

    发布自定义事件的其它配置:

    * 'broadcast': whether or not the YUI instance and YUI global are notified when the event is fired (false)
    * 'bubbles': whether or not this event bubbles (true)
    * 'context': the default execution context for the listeners (this)
    * 'defaultFn': the default function to execute when this event fires if preventDefault was not called
    * 'emitFacade': whether or not this event emits a facade (false)
    * 'fireOnce': if an event is configured to fire once, new subscribers after the fire will be notified immediately.
    * 'preventable': whether or not preventDefault() has an effect (true)
    * 'preventedFn': a function that is executed when preventDefault is called
    * 'queuable': whether or not this event can be queued during bubbling (false)
    * 'silent': if silent is true, debug messages are not provided for this event.
    * 'stoppedFn': a function that is executed when stopPropagation is called
    * 'type': the event type (valid option if not provided as the first parameter to publish) 
    

    (出自:http://developer.yahoo.com/yui/3/api/Event.Target.html)

    AOP的实现
    关于AOP的解释: "AOP是OOP的延续,是Aspect Oriented Programming的缩写,意思是面向切面编程。可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术。"

    通过subscribe、before方法可以添加处理方法到默认处理方法之前,通过after方法添加处理到默认处理方法之后。如:
    publisher.subscribe('event1', function(){
    Y.log('event 1');
    });
    publisher.before('event1', function(){
    Y.log('before: event 1');
    });
    publisher.after('event1', function(){
    Y.log('after: event 1');
    });
    publisher.fire('event1');

    触发event1后,看到的log信息将会是:
    event 1
    before: event1
    default event handler
    after: event1
    (其中subscribe和before的顺序是看其定义的顺序)
    可以在前后任意增加处理方法,确实很cool!

    YUI 3的Event确实很好,很强大,唯一缺的可能就是对特殊事件的支持,比如mousewheel, mouseenter, mouseleave

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 MATLAB怎么通过柱坐标变换画开口是圆形的旋转抛物面?
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿