`
yiyu
  • 浏览: 186719 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

YUI 3 学习笔记(3)- Event

阅读更多
YUI的Event包可以用来操纵DOM事件,也可以自定义事件。


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

另外,Event.purgeElement可以清理所有通过on添加的事件处理函数,而且可以
设定是否对子元素递归清理。


4.模拟鼠标事件
可以通过Node.simulate()模拟鼠标事件,可以模拟7种鼠标事件:
    * click
    * dblclick
    * mousedown
    * mouseup
    * mouseover
    * mouseout
    * mousemove
同时可以指定一些附加信息,例如:
YUI().use('node-event-simulate', function(Y) {
    Y.one("body").simulate("click", { shiftKey: true });
});

模拟按下Shift键的click事件,这些附加信息包括:
    * detail - click的次数.
    * screenX/screenY
    * clientX/clientY
    * ctrlKey/altKey/shiftKey/metaKey
    * button - 0:左,1:右, 2:中
    * relatedTarget


5. 模拟键盘事件
  可以模拟以下事件:
    * keyup
    * keydown
    * keypress
keyup和keydown必须指定keyCode,keypress必须指定charCode,另外还可以
指定ctrlKey, altKey, shiftKey和metaKey,以下是几个例子:
YUI().use('node-event-simulate', function(Y) {
     var node = Y.one("#myDiv");
 
    node.simulate("keydown", { keyCode: 97 });
 
    //simulate typing "a"
    node.simulate("keypress", { charCode: 97, altKey: true });    
});



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


7. domready(onDOMReady)事件
  domready事件在DOM树构建完成时触发,有可能是在图像加载完毕以前。


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>



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

可以使用on实现简单的自定义事件。注册listener是这样的:
Y.on('customapp:started', function(arg1, arg2, arg3) {
    Y.log('Custom App Started, now I can do a a few things);
});

激发这个事件是这样的:
YUI().use('event-custom', function(Y) {
    Y.fire('customapp:started', 1, 2, 3);
});

另外可以用augment将一对象提升为Event target,用publish定义一个Event,注册listener
还是用on,激发事件还是用fire,下面是示例代码:
YUI().use('event-custom', function(Y) {

	function Publisher() {
		this.publish("publisher:testEvent", {});
	}

	Y.augment(Publisher, Y.EventTarget, null, null, 'test');
	
	publisher = new Publisher();
	publisher.on("publisher:testEvent", function(e){
		alert(e);
	});
	
	publisher.fire("publisher:testEvent", 'test arg1');
});

其中publish只有当需要覆盖默认配置时才需要。
分享到:
评论
1 楼 cheneyjuu 2010-06-02  
以前一直在用jQuery,目前在看YUI,你的资料很及时,谢谢分享。

加油!!

相关推荐

    yuicompressor-maven-plugin

    3. **部署策略**:在生产环境中,使用压缩过的文件,而在开发环境中使用原始文件,便于调试。 4. **测试**:在部署前进行充分测试,确认压缩后的文件不会影响功能。 总之,`yuicompressor-maven-plugin`为Maven项目...

    yui3-master.zip

    在“yui3-master.zip”中,我们可以看到不同模块的源代码文件,如“build”目录下的“node”, “event”, “dom”等,这些都是YUI3的核心模块。 2. **事件系统** YUI3的事件系统是其强大功能之一,它允许开发者...

    yui-yuidoc-yuidoc-50-529-gc631758

    3. **YUI Event System**:强大的事件系统支持事件监听和分发,使得开发者可以轻松响应用户交互和页面变化。 4. **YUI DOM utilities**:提供了丰富的 DOM 操作方法,如选择元素、修改属性、添加/删除样式等,简化...

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    Yui_ext 学习笔记

    【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...

    yuicompressor-2.4.8.jar

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yuicompressor-...

    eclipse yuicompressor-maven-plugin

    ### 3. eclipse yuicompressor-maven-plugin `yuicompressor-maven-plugin`是Maven的一个插件,它将YUI Compressor集成到Maven的构建流程中。在Eclipse环境中,开发者可以方便地使用此插件在构建项目时自动对.js和....

    yuicompressor-2.4.jar

    压缩JS所使用jar包!...压缩JS:java -jar yuicompressor-2.4.jar --type js xxx.js -o xxx.js --charset utf-8 压缩CSS:java -jar yuicompressor-2.4.jar --type css xxx.css -o xxx.css --charset utf-8

    YUI-EXT使用详解

    3. **数据绑定(Data Binding)**:YUI-EXT支持数据绑定,允许UI组件与后台数据模型直接关联。当数据模型发生变化时,UI会自动更新,反之亦然。这极大地简化了数据驱动的界面开发。 4. **表单(Forms)**:YUI-EXT...

    Yahoo YUI2.7中文API 完整版

    用户可以通过这个文件快速查找和学习 YUI 2.7 中文 API 的各种功能,无需互联网连接。 **三、使用 YUI 2.7 开发** 在实际开发中,你可以根据项目需求,选择合适的 YUI 模块。例如,如果需要处理页面上的点击事件,...

    yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件.zip

    yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件 [[Flattr this git repo] ( http://api.flattr.com/button/flattr-badge-large.png)]...

    yui-compressor 2.4.6 2011-04-15发布YUI

    yui compressor 2.4.6 发布日期:2011-04-15 用例: java -jar yuicompressor-2.4.6.jar myfile.js -o myfile-min.js

    yui3-3.17.2最新版

    YUI 3包含了一系列核心模块,如Event(事件处理)、Node(DOM操作)、IO(异步数据交互)等,同时还有许多可选的组件,如Grids(表格)、Charts(图表)、Form(表单元素)等,覆盖了前端开发的多个方面。...

    yuicompressor-2.4.2.jar

    yuicompressor.jar js/css压缩 //压缩JS java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js &gt; packed.js //压缩CSS java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src...

    yui_2.9.0用于javascript基础教程

    适合图灵程序设计丛书web开发系列-javascript基础教程的学习使用

    YUI 3 Cookbook

    - **示例**: `&lt;script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"&gt;&lt;/script&gt;` - **用途**: 快速集成到现有项目中。 **1.3 Identifying and Loading Individual Modules** - **关键**: 识别并加载...

    YUI3 dialog组件

    **YUI3 Dialog组件详解** YUI3是Yahoo!推出的一款强大的JavaScript库,它提供了丰富的UI组件和工具,用于构建高性能、跨平台的Web应用程序。Dialog组件是YUI3中的一个重要部分,它允许开发者创建可交互的弹出窗口,...

Global site tag (gtag.js) - Google Analytics