YUI3 event小结

其它事件，参考：http://yuilibrary.com/yui/docs/event/

use("______", ...) What's in it?

event-base	The core DOM event subscription system as well as the DOM lifecycle eventsdomready, contentready, and available. Notably, it does NOT include event delegation event simulation synthetic events If you've use()d anything, you probably have this already.
event	event定义在event module中,除了 event-simulate   node-event-simulate   node-event-delegate 这三个模块中外，其它模板都包含event     event module提供了如下几个类:详情参考http://yuilibrary.com/yui/docs/api/modules/event.html   DOMEventFacade( preventDefault 这个方法 不要执行与事件关联的默认动作（如果存在这样的动作） ，stopPropagation 是阻止冒泡事件) Event SyntheticEvent（ detach 删除事件） SyntheticEvent.Notifier SynthRegistry
event-delegate &  node-event-delegate	事件委托和节点委托功能
event-simulate &  node-event-simulate	模拟事件 Note: 伪造事件不应该用在面向用户的代码。
event-synthetic	事件合成
event-flick	增加了一个“甩尾”事件或触摸鼠标交互。
event-focus	blur和focus不支持冒泡事件的，event-focus这个模块是让focus和blur支持冒泡事件？
event-gestures	事件的手势，如gesturemove，touchstart等 在发下模块中: "event-touch" "event-move" "event-flick" In the future, may contain more gesture abstraction modules.
event-hover	增加了一个“悬停”事件，一个用于启动，和一个结束
event-key	增加了一个“键盘”事件，当键被按下时
event-mouseenter	增加一个 "mouseenter" and "mouseleave" 事件，相当于 "mouseover" 和"mouseout".
event-mousewheel	鼠标滚轮事件，目前，这一事件只能认购y.on（“mousewheel”，回调函数）；
event-move	增加了“gesturemovestart（手势行动的开始）”，“gesturemove（手势行动的)”，和“gesturemoveend（手势行动的结束）”事件， 根据客户设备作为抽象在鼠标和触摸等事件。
event-outside	外部事件 blur change click dblclick focus keydown keypress keyup mousedown mousemove mouseout mouseover mouseup select submit 也可以定义外部事件，Y.Event.defineOutside(eventType)，Y.Event.defineOutside(eventType, "yonderclick").
event-resize	增加了一个“windowresize”事件，只有fire()后，用户已停止拖动窗口的大小调整手柄。这种标准化的window.onresize事件跨越浏览器。 这样调用： Y.on("windowresize", callback); 使用Y.on订阅一个自定义事件，通过调用Y.fire方法可以在程序中触发自定义事件。
event-touch	触摸事件
event-valuechange	增加了一个“valuechange”事件触发时，输入元素文本的变化 valuechange事件时引发的价值属性的文本输入字段或变化的结果，一个按键，鼠标操作，或输入法编辑器（拼音）输入事件。

 

 

使用Y.on订阅一个自定义事件，通过调用Y.fire方法可以在程序中触发自定义事件。

 

YUI().use('event-custom', function(Y) {
   Y.on('customapp:started', function() {
      alert('YUI 3');

  });

    Y.fire('customapp:started');
});

 

 

EventFacade相关属性

EventFacade包装原始的event对象，在DOM事件及自定义事件中作为第一个参数传递给回调函数。

关于DOM事件的event属性可以参考 w3c相关讲解 

本节主要说明EventFacade的几个常用属性和方法：

Y.on('click',function(e){

this; //注册事件的对象 ；如果是委托事件， this 不会代表委托对象，而只表示被委托的单个对象。

  // 如果是 NodeList注册，返回NodeList 集合对象； 

e.target;          //触发事件的对象（在click事件中即被点击的对象，并不一定是注册的对象）

e.currentTarget ;   // 注册事件的对象；如果是委托事件，也只表示被委托的单个对象。

 //  与 this不同，如果是NodeList 注册，返回集合中被点击的对象  

e.container;          // 委托对象  ，非委托事件  返回  undefined

  

e.stopPropagation(); //停止事件冒泡。

e.preventDefault();  //阻止事件默认行为。

e.halt(); //相当于调用stopPropagation() 和 preventDefault()

}

转载于： http://houfeng0923.iteye.com/blog/1126478

once用法：

当加载dom完成后，只执行一次事件，和on的使用格式一样：

下面的例子，当点击test时，会弹出test,再点击时showMsg就不会被执行，而showMsg1却可执行无限次

<script type="text/javascript">
   YUI().use("node",function(Y){
	   function showMsg(){ alert('test');}
	    function showMsg1(){ alert('test1');}
       Y.one('#demo').once('click',showMsg);
	   Y.one('#demo').on('click',showMsg1);
     
   });
</script>

  <div id="demo" style="cursor:pointer;">test</div>

 

  另外： 传递一个数组事件可以调用相同的函数

inputNode.on(['focus', 'mouseover'], activate);

对象可 订阅 多个事件 ， 每个都有自己的 回调函数

function validate(e) { ... }
function clearPlaceholder(e) { ... }

var groupSub = inputNode.on({
    blur    : validate,
    keypress: validate,
    focus   : clearPlaceholder
});
groupSub.detach();//删除所有监听事件

事件分类node('myclass|click',callback)
node.on('foo-category|click', callback);

node.detach('foo-category|click');
// OR
node.detach('foo-category|*')
创建dom自定义事件： Y.Event.define(type, config) 
Y.Event.define("tripleclick", {

    // The setup logic executed when node.on('tripleclick', callback) is called
    on: function (node, subscription, notifier) {
        // supporting methods can be referenced from `this`
        this._clear(subscription);

        // To make detaching easy, a common pattern is to add the subscription
        // for the supporting DOM event to the subscription object passed in.
        // This is then referenced in the detach() method below.
        subscription._handle = node.on('click', function (e) {
            if (subscription._timer) {
                subscription._timer.cancel();
            }

            if (++subscription._counter === 3) {
                this._clear(subscription);

                // The notifier triggers the subscriptions to be executed.
                // Pass its fire() method the triggering DOM event facade
                notifier.fire(e);
            } else {
                subscription._timer =
                    Y.later(300, this, this._clear, [subscription]);
            }
        });
    },

    // The logic executed when the 'tripleclick' subscription is `detach()`ed
    detach: function (node, subscription, notifier) {
        // Clean up supporting DOM subscriptions and other external hooks
        // when the synthetic event subscription is detached.
        subscription._handle.detach();

        if (subscription._timer) {
            subscription._timer.cancel();
        }
    },

    // Additional methods can be added to support the lifecycle methods
    _clear: function (subscription) {
        subscription._counter = 0;
        subscription._timer = null;
    },
    
    ...
});
 

调用：Y.one('#hellokitty').on('tripleclick', omgYayCantClickEnough);