- 浏览: 186719 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
di1984HIT:
记录一下。嘿嘿
eclipse中关闭js报错的方法 -
di1984HIT:
谢谢,学习了
jdk输出带缩进格式xml的方法 -
雪狐狼:
为何,每次查询需要 构建datatable?
YUI DataTable 服务器端翻页与排序 -
lijunwyf41:
nd:"nd", // 表示已经发送请求的 ...
jqGrid <-- json --> spring,hibernate之服务器端分页,排序 -
yiyu:
最近不看YUI了,发现一个国产的前端框架,是金蝶出的,叫Ope ...
YUI 3 学习笔记(5)- Attribute类
YUI的Event包可以用来操纵DOM事件,也可以自定义事件。
1. 要使用Event,首先要引入YUI3的种子文件:
然后加载相应模块:
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,指定事件名、处理函数和元素
另外,Event.purgeElement可以清理所有通过on添加的事件处理函数,而且可以
设定是否对子元素递归清理。
4.模拟鼠标事件
可以通过Node.simulate()模拟鼠标事件,可以模拟7种鼠标事件:
* click
* dblclick
* mousedown
* mouseup
* mouseover
* mouseout
* mousemove
同时可以指定一些附加信息,例如:
模拟按下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,以下是几个例子:
6. available(onAvailable)和contentready(onContentReady)事件
available事件在一个元素刚刚出现在DOM树中时触发。
contentready事件在一个元素和它的下一个元素都可以用getElementById获得
时触发,以保证该元素已加载完毕(除了动态加载的内容以外)
7. domready(onDOMReady)事件
domready事件在DOM树构建完成时触发,有可能是在图像加载完毕以前。
8. delegate方法
事件代理(Event delegate)机制可以在父元素处唯一绑定一个listener监听该
父元素的多个子元素处发生的事件,以如下的html为例:
以下这段代码将一listener绑定到"container",却监听着其3个子元素(<li>)处的
click事件:
9. focus和blur事件
DOM的focus和blur事件是不做冒泡传递的,但YUI的Event utility的focus和blur事件
却可以,因此可以实现集中的事件处理。
以下是一段示例代码:
其中"#toolbar"是一个包含3个按钮的<div>,如下:
10. mouseenter和mouseleave事件
YUI也提供mouseenter和mouseleave事件,代码如下所示:
11. 自定义事件
可以使用on实现简单的自定义事件。注册listener是这样的:
激发这个事件是这样的:
另外可以用augment将一对象提升为Event target,用publish定义一个Event,注册listener
还是用on,激发事件还是用fire,下面是示例代码:
其中publish只有当需要覆盖默认配置时才需要。
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只有当需要覆盖默认配置时才需要。
发表评论
-
使用fuelux tree
2016-04-19 21:06 2702bootstrap这么火,就是fuelux又是同一家推 ... -
eclipse中关闭js报错的方法
2013-05-18 12:35 1553eclipse中引入yui报错,关闭validation后不 ... -
YUI:带checkbox的TreeView的赋值与读值
2010-09-10 16:08 2176日前做一个用户权限管 ... -
YUI DataTable不显示标题栏的方法
2010-09-07 14:32 1704今天碰到一个怪异的需求,用YUI做的表格不要各字段的标题,即下 ... -
YUI中的模块化使用对话框
2010-08-12 16:30 3882最近在试着用YUI 2.8.1,想到一个将对话框模块化的方法, ... -
YUI 3 学习笔记(5)- Attribute类
2010-03-08 16:07 2029Attribute类用于向一个类添加属性,它给类增加了set和 ... -
YUI 3 学习笔记(4)- Base基类
2010-03-05 17:29 1544Base是一个基础类,通过继承Base可以以一种统一的方式创建 ... -
YUI 3 学习笔记(2)- Node
2010-03-01 17:46 2529Node是用来操作DOM node的工具,实际上每一个Node ... -
YUI 3 学习笔记(1)-YUI Global对象
2010-03-01 15:38 2083YUI3模块已经发布,配套的工具及部件虽然现在还不全,但也计划 ... -
html5 canvas 小试:绘制2次曲线
2010-02-23 17:27 2255canvas是html5中新增加的元素,可以用来在html中通 ... -
设置innerHTML后翻滚的奇怪现象
2010-01-28 16:47 1150最近碰到一个奇怪的问题,记录一下。 处理过程是这样的,画面的 ... -
ie和firefox上都运行流畅的网页分割条
2010-01-13 14:15 2001这两天因工作需要做了一个网页分割条,期间碰到不少问题,好在最后 ... -
检测浏览器支持的javascript版本
2010-01-05 11:31 1512今天找到一段检测浏览器支持的javascript版本的代码,感 ... -
使用YUI layout时菜单被遮挡问题的解决
2009-10-16 14:00 1431使用YUI layout时菜单被遮挡问题的解决 今天在使用Y ... -
javascript中定义类的几种方法
2009-09-02 15:59 1118在javascript中有几种定义类的方式,以下分别列出并说明 ... -
从服务器获取Chart的数据
2009-08-11 11:04 3032ExtJs提供了绘制图表的功能,可以绘制折线图、条形图和饼图。 ... -
ExtJs树的动态加载
2009-08-06 10:37 4802有时候我们不希望一开始就取得整个树的数据然后初始化树,而是希望 ... -
使用Smooth Navigational Menu实现动态菜单
2009-02-10 14:34 1405在企业应用中一般需要根据登录用户的身份动态生成系统菜单,本文演 ... -
jquery学习笔记(5) AJAX
2009-02-05 10:43 11531. 添加HTML $('#dictionary').loa ... -
jquery学习笔记(4) DOM Manipulation
2009-02-04 14:43 1040本文是Learning JQuery的学习笔记 1. att ...
相关推荐
3. **部署策略**:在生产环境中,使用压缩过的文件,而在开发环境中使用原始文件,便于调试。 4. **测试**:在部署前进行充分测试,确认压缩后的文件不会影响功能。 总之,`yuicompressor-maven-plugin`为Maven项目...
在“yui3-master.zip”中,我们可以看到不同模块的源代码文件,如“build”目录下的“node”, “event”, “dom”等,这些都是YUI3的核心模块。 2. **事件系统** YUI3的事件系统是其强大功能之一,它允许开发者...
3. **YUI Event System**:强大的事件系统支持事件监听和分发,使得开发者可以轻松响应用户交互和页面变化。 4. **YUI DOM utilities**:提供了丰富的 DOM 操作方法,如选择元素、修改属性、添加/删除样式等,简化...
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 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yuicompressor-...
### 3. eclipse yuicompressor-maven-plugin `yuicompressor-maven-plugin`是Maven的一个插件,它将YUI Compressor集成到Maven的构建流程中。在Eclipse环境中,开发者可以方便地使用此插件在构建项目时自动对.js和....
压缩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
3. **数据绑定(Data Binding)**:YUI-EXT支持数据绑定,允许UI组件与后台数据模型直接关联。当数据模型发生变化时,UI会自动更新,反之亦然。这极大地简化了数据驱动的界面开发。 4. **表单(Forms)**:YUI-EXT...
用户可以通过这个文件快速查找和学习 YUI 2.7 中文 API 的各种功能,无需互联网连接。 **三、使用 YUI 2.7 开发** 在实际开发中,你可以根据项目需求,选择合适的 YUI 模块。例如,如果需要处理页面上的点击事件,...
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 用例: java -jar yuicompressor-2.4.6.jar myfile.js -o myfile-min.js
YUI 3包含了一系列核心模块,如Event(事件处理)、Node(DOM操作)、IO(异步数据交互)等,同时还有许多可选的组件,如Grids(表格)、Charts(图表)、Form(表单元素)等,覆盖了前端开发的多个方面。...
yuicompressor.jar js/css压缩 //压缩JS java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js //压缩CSS java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src...
适合图灵程序设计丛书web开发系列-javascript基础教程的学习使用
- **示例**: `<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>` - **用途**: 快速集成到现有项目中。 **1.3 Identifying and Loading Individual Modules** - **关键**: 识别并加载...
**YUI3 Dialog组件详解** YUI3是Yahoo!推出的一款强大的JavaScript库,它提供了丰富的UI组件和工具,用于构建高性能、跨平台的Web应用程序。Dialog组件是YUI3中的一个重要部分,它允许开发者创建可交互的弹出窗口,...