其它事件,参考:http://yuilibrary.com/yui/docs/event/
使用Y.on订阅一个自定义事件,通过调用Y.fire方法可以在程序中触发自定义事件。
- YUI().use('event-custom', function(Y) {
- Y.on('customapp:started', function() {
- alert('YUI 3');
-
- });
-
- Y.fire('customapp:started');
- });
EventFacade相关属性
EventFacade包装原始的event对象,在DOM事件及自定义事件中作为第一个参数传递给回调函数。
本节主要说明EventFacade的几个常用属性和方法:
Y.on('click',function(e){
this; //注册事件的对象 ;如果是委托事件,this 不会代表委托对象,而只表示被委托的单个对象。
//如果是NodeList注册,返回NodeList集合对象;
e.target; //触发事件的对象(在click事件中即被点击的对象,并不一定是注册的对象)
e.currentTarget ; // 注册事件的对象;如果是委托事件,也只表示被委托的单个对象。
// 与this不同,如果是NodeList注册,返回集合中被点击的对象
e.container; // 委托对象 ,非委托事件 返回 undefined
e.stopPropagation(); //停止事件冒泡。
e.preventDefault(); //阻止事件默认行为。
e.halt(); //相当于调用stopPropagation() 和 preventDefault()
}
once用法:
当加载dom完成后,只执行一次事件,和on的使用格式一样:
下面的例子,当点击test时,会弹出test,再点击时showMsg就不会被执行,而showMsg1却可执行无限次
<script type="text/javascript">
YUI().use("node",function(Y){
function showMsg(){ alert('test');}
function showMsg1(){ alert('test1');}
Y.one('#demo').once('click',showMsg);
Y.one('#demo').on('click',showMsg1);
});
</script>
<div id="demo" style="cursor:pointer;">test</div>
另外:传递一个数组事件可以调用相同的函数
inputNode.on(['focus', 'mouseover'], activate);
对象可订阅多个事件,每个都有自己的回调函数
function validate(e) { ... }
function clearPlaceholder(e) { ... }
var groupSub = inputNode.on({
blur : validate,
keypress: validate,
focus : clearPlaceholder
});
groupSub.detach();//删除所有监听事件
事件分类node('myclass|click',callback)
node.on('foo-category|click', callback);
node.detach('foo-category|click');
// OR
node.detach('foo-category|*')
创建dom自定义事件:
Y.Event.define(type, config)
Y.Event.define("tripleclick", {
// The setup logic executed when node.on('tripleclick', callback) is called
on: function (node, subscription, notifier) {
// supporting methods can be referenced from `this`
this._clear(subscription);
// To make detaching easy, a common pattern is to add the subscription
// for the supporting DOM event to the subscription object passed in.
// This is then referenced in the detach() method below.
subscription._handle = node.on('click', function (e) {
if (subscription._timer) {
subscription._timer.cancel();
}
if (++subscription._counter === 3) {
this._clear(subscription);
// The notifier triggers the subscriptions to be executed.
// Pass its fire() method the triggering DOM event facade
notifier.fire(e);
} else {
subscription._timer =
Y.later(300, this, this._clear, [subscription]);
}
});
},
// The logic executed when the 'tripleclick' subscription is `detach()`ed
detach: function (node, subscription, notifier) {
// Clean up supporting DOM subscriptions and other external hooks
// when the synthetic event subscription is detached.
subscription._handle.detach();
if (subscription._timer) {
subscription._timer.cancel();
}
},
// Additional methods can be added to support the lifecycle methods
_clear: function (subscription) {
subscription._counter = 0;
subscription._timer = null;
},
...
});
调用:Y.one('#hellokitty').on('tripleclick', omgYayCantClickEnough);
分享到:
相关推荐
yui3-master.zip
基于YUI3的dialog组件该组件是基于YUI3开发的,功能强大,详细见http://www.qiqicartoon.com
YUI教程YUI 入门教程YUI 入门教程YUI 入门教程
YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行回调来加载和使用模块。现场有很多人提出疑问,大家无非关心的是“效率”二字。个人以为在现阶段,这种方式有一点激进,否能为广大用户所...
从YUI2到YUI3看前端的演变
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。
YUI3 源码 非compress版 YUI3 源码 非compress版 YUI3 源码 非compress版
yui对于开发者来说是绝对的好用,开发者福利,特献上最新版
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...
yui官网下载的。内容很全,示例+doc说明
YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as ...
yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2
NULL 博文链接:https://ttwang.iteye.com/blog/1741631
本书作者便是在此背景下,以国外最优秀的JavaScript框架之一——Yahoo User Interface Library(简称YUI)的最新版本YUI 3.15为基础编写而成。本书通过通俗易懂的语言和大量丰富的实例,帮助读者解决实际生产环境...
YAHOO YUI 中文文档 AJAX 详细 比较好用
里面包含了YUI的所有实例(element、event等一系列的实例)
yui 源码下载,3.9.0 r2 包,最新版本
YUI Compressor非常好用,特别是JS的混淆是众多JS Coding的最爱。可惜官网提供的版本都不具备右键功能,每次压缩都要cmd输入一些命令实在是繁琐,本文就介绍如何给YUI Compressor添加右键命令,方便使用。 网上已有...