YUI 3:Event

阅读更多

1. 要使用Event，首先要引入YUI3的种子文件：

然后加载相应模块：

 

YUI().use('event', function(Y) {

});

2. 设置事件响应函数:on() 
有两个on方法，一个是YUI的，一个是Node的 

Y.on("click", handleClick, "#foo p") 设置元素"#foo p"的click事件处理函数为handleClick。 
foo.on("click", handleClick) 的作用与上面的一样 

对于YUI的on方法，参数如下： 

Y.on('eventName', 'handler', 'elements', 'contextObject', 'arg1', ……);

 
1) 事件名。关于各事件在主要浏览器中的兼容性，可以参见这里： 
http://www.quirksmode.org/dom/events/index.html 
2) 事件处理句柄 
3) 元素，可以是多个，多个的写法是这样：["#foo p", "#bar"] 
4) 上下文对象，即事件处理函数中的this,如果忽略，就是target元素的Node 

举个例子：

var obj = { name: 'yleo77', email: '[email protected]' };
Y.on('click', handler, '#mybutton', obj);
function handler(){
    alert('hello ,'+ this.name);
}

 其中contxtObject可以绑定一个上下文对象，在handler里直接利用this来进行操作该对象。

参见百度的 上下文对象

5) 参数，可以有多个，按顺序为事件处理函数中event之后的参数 


3. 移除事件响应函数  
有三种方式： 
1) 在事件名前加前缀，然后用YUI的detach移除 
2) 保存事件句柄，然后通过该句柄移除 
3) 用YUI的detach，指定事件名、处理函数和元素 

YUI().use('node-base', function(Y) {
  //an event handler:
    function handleClick(e) {
        Y.log(e);
    }
 
    var fooHandle = Y.on("eventcatgory|click", handleClick, "#foo");
 
    //第一种
    Y.detach('eventcategory|click');
	Y.detach('eventcategory|*');
 
    //第二种
    fooHandle.detach();
    Y.detach(fooHandle);
    
    //第三种
    Y.detach("click", handleClick, "#foo");
});

4.模拟事件：

模拟时间也就是模拟鼠标或键盘自动点击，自动执行一系列动作。

暂时不讨论。

 

5.使用available 和 contentready事件

available事件在一个元素刚刚出现在DOM树中时触发。 
contentready事件在一个元素和它的下一个元素都可以用getElementById获得
时触发，以保证该元素已加载完毕（除了动态加载的内容以外）

 

6.使用domready事件

 domready事件在DOM树构建完成时触发，有可能是在图像加载完毕以前

 

7.使用key事件

8.使用delegate方法

  事件代理(Event delegate)机制可以在父元素处唯一绑定一个listener监听该
父元素的多个子元素处发生的事件，以如下的html为例：

    

        
Item Type One
        
Item Type Two
        
Item Type Three
    

 以下这段代码将一listener绑定到"container"，却监听着其3个子元素(

)处的click事件： 
 

YUI().use("event-delegate", function(Y) {
 
	Y.delegate("click", function(e) {
		Y.log("Default scope: " + this.get("id"));
 		Y.log("Clicked list item: " + e.currentTarget.get("id"));
		Y.log("Event target: " + e.target);	
		Y.log("Delegation container: " + e.container.get("id"));	
 	}, "#container", "li");
});

 

9.使用focus和blur事件

DOM的focus和blur事件是不做冒泡传递的，但YUI的Event utility的focus和blur事件
却可以，因此可以实现集中的事件处理。
以下是一段示例代码：

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);
    }, "#toolbar", Y, "arg1", "arg2", "etc");
});

其中"#toolbar"是一个包含3个按钮的

，如下：

 例子全部代码：

 效果：

 

 

10.使用mouseenter和mouseleave事件

 YUI也提供mouseenter和mouseleave事件，代码如下所示：

YUI().use("event-mouseenter", function(Y) {
	Y.on("mouseenter", function (e) {
		Y.log("Mouse entered: " + this.get("id"));
	}, "#container");
	Y.on("mouseleave", function (e) {
		Y.log("Mouse left: " + this.get("id"));
	}, "#container");
});

 

 

11.使用hover事件

12.使用Touch event

13：跨设备手势支持

14.Cross-Device 手势支持

15.创建一个综合的DOM事件

16.创建自定义事件

 

• 
• 大小: 23.6 KB

• 
• 大小: 12.7 KB

• 查看图片附件