YUI3学习（5）- Event

YUI().use('node',function(Y){
   Y.on('click',function(e){
        alert('id==foo's dom is clicked');
    },'#foo');
});

YUI().use( "node-base", function(Y) {
     var contextObj = {
        name: "context"
    };
//    事件处理函数
    function handleClick(e, arg1, arg2) {  
         alert(this.name); //'context'
         alert(arg1+','+arg2);// "argumentOne", "argumentTwo"
    }
    var handler = Y.on("click", handleClick, "#list .odd", contextObj, "argumentOne", "argumentTwo");
    
});

YUI().use('node-base', function(Y) {
  
    function handleClick(e) {
        Y.log(e);
    }
    //事件处理器句柄
    var handler = Y.on("menu|click", handleClick, "#foo");
 
    //利用事件处理器句柄对象移除事件监听
    handler.detach();
    //or
    Y.detach(handler);
    //利用事件分类移除事件监听；未分类事件不能采用；
    Y.detach('menu|click');  
    Y.detach('menu|*');
    //利用事件处理函数移除事件监听；
    Y.detach("click", handleClick, "#foo");
});

   //移除#input1上所有事件监听
Y.Event.purgeElement('#input1')
  //移除#input1及所有子节点上所有事件监听
Y.Event.purgeElement('#input1',true);
  //仅移除#input1上click事件监听
Y.Event.purgeElement('#input1',false,'click');

Y.on('click',function(e){
	 	alert('e')
},'#input1');
 
Y.one('#input1').simulate('click',{ altKey: true});

YUI().use('node-event-simulate', function(Y) {
 
    var node = Y.one("#myDiv");
    //simulate a keydown on the A key
    node.simulate("keydown", { keyCode: 97 });
    //simulate a keyup on the A key
    node.simulate("keyup", { keyCode: 97 });
    //simulate typing "a"
    node.simulate("keypress", { charCode: 97 });
});

YUI().use('event-key', function(Y) {
    // 保存Y.on的返回值，用于一会移除监听器
    var handle = Y.on('key', function(e, arg1, arg2, etc) {
        Y.log(e.type + ": " + e.keyCode + ' -- ' + arg1);
        // 停止冒泡并阻止默认事件
        e.halt();//e.preventDefault();e.stopPropagation();
        // 取消监听，保证只会执行一次
        handle.detach();
 
    }, '#text1', 'down:13', Y, "arg1", "arg2", "etc");
   //此外，让事件监听器执行一次还可以使用Y.once。
});

<div id="container">
    <ul>
        <li id="item-1"><em>Item Type One</em></li>
        <li id="item-2"><em>Item Type Two</em></li>
        <li id="item-3"><em>Item Type Three</em></li>
    </ul>
</div>

 YUI().use("event-delegate", function(Y) {
 
    Y.delegate("click", function(e) {
        //  通过'this'获取选择器提供的列表元素
        Y.log("Default scope: " + this.get("id"));
        //  也可以通过e.currentTarget来获取选择器提供的列表元素
        Y.log("Clicked list item: " + e.currentTarget.get("id"));
        //  实际点击的目标，可能是匹配的元素也可能是它的后代元素。
        Y.log("Event target: " + e.target);
        //  通过e.container获取容器元素
        Y.log("Delegation container: " + e.container.get("id"));
 
    }, "#container", "li");
 
});

   var container = Y.one("#container");
    container.delegate("click", function (e) {
        // Same as above
    }, "li");

<div id="toolbar">
    <input type="button" id="button-cut" name="button-cut" value="Cut">
    <input type="button" id="button-copy" name="button-copy" value="Copy">
    <input type="button" id="button-paste" name="button-paste" value="Paste">
</div>

YUI().use("event-focus", function(Y) {
    var handle = Y.on("focus", function(e, arg1, arg2, etc) {
        Y.log("target: " + e.target + ", arguments: " + arg1 + ", " + arg2 + ", " + etc);
    // Attach to the element with the id of "toolbar", make Y the context, add arguments
    }, "#toolbar", Y, "arg1", "arg2", "etc");
 
});

<div id="container">
    <ul>
        <li><em>Item Type One</em></li>
        <li><em>Item Type Two</em></li>
        <li><em>Item Type Three</em></li>
    </ul>
</div>

 YUI().use("event-hover", function(Y) {
 
    function over(e) {
        this.addClass("hover");
    }
 
    function out(e) {
        this.removeClass("hover");
    }
 
    var button = Y.one("#myButton");
 
    // 订阅独立的事件。只能在Node对象上这样使用
    button.on({
        mouseenter: over,
        mouseleave: out
    });
 
    // 或者通过hover事件来订阅
    button.on("hover", over, out);
 
    // 同样也可以通过委托来订阅
    Y.one("#menu").delegate("hover", over, out, ".menuItem");
});

 myNode.on("flick", function(e) {
  // 可以获取flick事件的一些特别的属性 
     var flick = e.flick,
      velocity = flick.velocity,
      distance = flick.distance,
      axis = flick.axis,
      startX = flick.start.pageX,
      startY = flick.start.pageY,
 
  // 以下表示mouseup或touchend时的事件属性 
      endX = e.pageX,
      endY = e.pageY,
      endTarget = e.target;
 
});

//回调函数未设置上下文环境和参数
myNode.on("flick", flickHandler, {
 
    //只有在轻弹操作距离不小于20px、速度不小于0.8px/ms时才触发
    minDistance:20,
    minVelocity:0.8, 
    //阻止默认事件
    preventDefault:true
});
 
//回调函数绑定上下文环境和参数
myNode.on("flick", Y.bind(o.flickHandler, o, arg1), {
    minDistance:20,
    minVelocity:0.8,
    preventDefault:true
});
 
 
//或使用如下方式绑定上下文和参数。事件额外配置信息为null
myNode.on("flick", o.flickHandler, null, o, arg1);
Y.on('flick',o.flickHandler,'#myNode',null,o,arg1);

// 当鼠标或手指按下时触发
myNode.on("gesturemovestart", function(e) {...}, {
    //在手势移动了最少3px时延时1s执行
    minDistance: 3,
    minTime:1000,
 
    //如果目标对象不是select标签，阻止默认行为的触发
    preventDefault:function(e) {
        return (e.target.get("tagName").toLowerCase() !== "select");
    }
});
 
// 当鼠标或手指按下移动时触发
//节点需要注册gesturemovestart才有效。
myNode.on("gesturemove", function(e) {...});
 
 
//当鼠标或手指移动结束后触发
//节点需要注册gesturemovestart才有效
myNode.on("gesturemoveend", function(e) {...}); 

//鼠标或手指在文档中移动时触发
//不需要document注册gesturemovestart (standAlone:true)
Y.one("document").on("gesturemove", function(e) {...}, {
    standAlone:true
});

YUI().use("event-synthetic", function(Y) {
 
    // 创建名称为 "clickoutside"的合成事件
    Y.Event.define("clickoutside", {
 
        // 当程序订阅'clickoutside‘事件时触发
        on: function (node, subscription, notifier) {
 
            function outside(clickTarget) {
                return clickTarget !== node && !clickTarget.ancestor(
                    function (parent) {
                        return parent === node;
                    });
            }
  
            var handle = Y.one('doc').on('click', function (e) {//触发合成事件的事件
                if (outside(e.target)) {
                    notifier.fire(e);
                }
            });
            subscription.clickHandle = handle; 
        },
         //撤销事件
        detach: function (node, subscription, notifier) {
            subscription.clickHandle.detach();
        },
        //当程序使用委托订阅合成事件时触发
        delegate: function (node, subscription, notifier, filter) {
           // ...
        },
       //撤销委托事件
        detachDelegate: function (node, subscription, notifier, filter) {
            //...
        }
    });
  
    Y.on("clickoutside", function (e) {
        this.addClass('hidden');
    }, "#menu");

YUI().use('event-custom', function(Y) {
   Y.on('customapp:started', function(arg1, arg2, arg3) {
      Y.log('Custom App Started, now I can do a few things);
    // the arguments 1, 2, and 3 were provided by fire()
  });

    Y.fire('customapp:started', 1, 2, 3);
});

YUI().use('event-custom', function(Y) {
  
    function Publisher() {
		//创建一个自定义事件publisher:testEvent
		//如果不需要覆盖默认的发布事件配置参数，可以不用显示的声明 
        this.publish("publisher:testEvent", {
            // 覆盖默认的配置
        });
    }
    // 使用EventTarget扩充Publisher
    Y.augment(Publisher, Y.EventTarget, null, null, {
		//该参数为EventTarget构造函数设置参数，修改事件默认属性 
    });
 
    // 如果使用默认事件属性，使用如下方式即可
    // Y.augment(Publisher, Y.EventTarget);
});

var publisher = new Publisher();
publisher.on("publisher:testEvent", function(e) {
    //处理事件代码
});

publisher.fire("publisher:testEvent");

YUI().use('event-custom', function(Y) {			
	var publisher = new Y.EventTarget();
	publisher.name = 'broadcast publisher';
	 
	publisher.publish('instance_notification:foo', {
	    broadcast:  1,   // 在当前YUI实例下有效
	    emitFacade: true // 是否创建EventFacade事件对象
	});
	 
	// 在当前YUI安全沙箱内有效
	Y.on('instance_notification:foo', function(e) {
	    Y.log(e.target.name); // broadcast publisher //emitFacade=true
	});
	 
	var publisher2 = new Y.EventTarget();
	publisher2.name = 'global publisher';
	 
	publisher.publish('global_notification:foo', {
	    broadcast:  2,   // 全局有效
	    emitFacade: true 
	});
	 
	//创建一个新的YUI沙箱
	YUI().use('event-custom', function(Y2) {
	    //在新的沙箱内，全局事件有效
	    Y2.Global.on('global_notification:foo', function() {
	        Y.log(e.target.name); // global publisher
	    });
	 	//无效
	    Y2.on('instance_notification:foo', function(e) {
	        // 不会执行
	    });
	});			
});