YUI 三:Event _Web前端

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: 'XXOO@gmail.com' };
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为例：

<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>

?以下这段代码将一listener绑定到"container"，却监听着其3个子元素(<li>)处的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个按钮的<div>，如下：

<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>

?例子全部代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Skinning via Progressive Enhancement using the Event Utility and the Loader</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
	
    .yui3-js-enabled .yui3-checkboxes-loading {
		display: none;	
	}

</style>
<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">


<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>

<script type="text/javascript">
YUI().use("node","event", "console", 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");
	(new Y.Console()).render();
});

</script>

</body>
</html>

?效果：

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.创建自定义事件