1. 要使用Event,首先要引入YUI3的种子文件:
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
然后加载相应模块:
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方法,参数如下:
有两个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,指定事件名、处理函数和元素
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获得
时触发,以保证该元素已加载完毕(除了动态加载的内容以外)
contentready事件在一个元素和它的下一个元素都可以用getElementById获得
时触发,以保证该元素已加载完毕(除了动态加载的内容以外)
6.使用domready事件
domready事件在DOM树构建完成时触发,有可能是在图像加载完毕以前
7.使用key事件
8.使用delegate方法
事件代理(Event delegate)机制可以在父元素处唯一绑定一个listener监听该
父元素的多个子元素处发生的事件,以如下的html为例:
父元素的多个子元素处发生的事件,以如下的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.创建自定义事件