/5.0/guides/event-custom/index.html
HTML | 209 lines | 199 code | 10 blank | 0 comment | 0 complexity | 2df111d7a060b3cee99e52aac28852ba MD5 | raw file
Possible License(s): Apache-2.0
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scale=no">
- <title>Guides - KISSY v5.0 Documentation</title>
- <link rel="shortcut icon" href="/5.0/assets/img/favicon.ico">
- <link rel="stylesheet" type="text/css" href="/5.0/assets/css/base.css">
- <link rel="stylesheet" type="text/css" href="/5.0/assets/css/main.css">
- <link rel="stylesheet" type="text/css" href="/5.0/assets/css/github.css"/>
- <script type="text/javascript" src="http://g.tbcdn.cn/kissy/edge/2014.09.05/seed.js" data-config="{combine:true}"></script>
- </head>
- <body>
- <div class="header">
- <div class="inner">
- <div class="toolbar">
- <a href="/5.0">
- <img class="mini-logo" src="/5.0/assets/img/mini-logo.png">
- </a>
- <ul class="nav clearfix">
- <li class="docs">
- <span>
- Docs
- <b class="caret"></b>
- </span>
- <ul>
- <li><a href="/5.0/guides/">Guides</a></li>
- <li><a href="/5.0/api">Api Docs</a></li>
- <li><a href="/5.0/demos">Demos</a></li>
- </ul>
- </li>
- <li class="more">
- <span>
- More
- <b class="caret"></b>
- </span>
- <ul>
- <li><a href="/5.0/more/faq.html">FAQ</a></li>
- <li><a href="http://gallery.kissyui.com/">Gallery</a></li>
- <li><a href="http://blog.kissyui.com/">KISSY Blog</a></li>
- <li><a href="https://github.com/daxingplay/kmc">KMC</a></li>
- <li><a href="https://github.com/minghe/generator-bee/wiki/generator-bee%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B">Generator</a></li>
- </ul>
- </li>
- <li class="split"></li>
- <li class="nav-other"><a href="/5.0/quick-start.html">Quick Start</a></li>
- <li class="nav-other"><a href="https://github.com/kissyteam/kissy">Contribute</a></li>
- <li class="nav-other"><a target="_blank" href="/5.0/kissyup-middle.html">KISSY UP</a></li>
- </ul>
- </div>
- <div class="search">
- <script>
- (function() {
- var cx = '003618533255763067140:5nkycw1pbey';
- var gcse = document.createElement('script');
- gcse.type = 'text/javascript';
- gcse.async = true;
- gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
- '//www.google.com/cse/cse.js?cx=' + cx;
- var s = document.getElementsByTagName('script')[0];
- s.parentNode.insertBefore(gcse, s);
- })();
- </script>
- <gcse:search></gcse:search>
- </div>
- </div>
- </div>
- <div class="main">
- <div class="guide">
- <div class="logo-on-top clearfix">
- <img src="/5.0/assets/img/logo-on-top.png">
- </div>
- <div class="inner clearfix">
- <div id="sidebar">
- <a class="link-apidocs btn btn-primary" href="../../api/classes/CustomEvent.html">API Docs</a>
- <div class="panel panel-primary">
- <div class="panel-heading">
- <h3 class="panel-title">Outline</h3>
- </div>
- <div class="panel-body">
- <ul class="outline">
- <li class="level2"><a href="#简单引用">简单引用</a></li><li class="level2"><a href="#自定义事件简单示例">自定义事件简单示例</a></li><li class="level2"><a href="#继承Base的类成员可以自定义事件">继承Base的类成员可以自定义事件</a></li>
- </ul>
- </div>
- </div>
- <div class="panel panel-primary ajax-load ">
- <div class="panel-heading">
- <h3 class="panel-title">Features</h3>
- </div>
- <div class="panel-body">
- <p><a href="../../guides/event-custom/index.html">event-custom 模块基本介绍</a></p>
- </div>
- </div>
- <div class="panel panel-primary ajax-load hide">
- <div class="panel-heading">
- <h3 class="panel-title">Demos</h3>
- </div>
- <div class="panel-body">
-
- </div>
- </div>
- </div>
- <div id="main-content">
- <p></p>
- <h1 id="event-custom 模块基本介绍">event-custom 模块基本介绍</h1><p>event-custom 模块事先自定义事件功能,只要将 CustomEvent.Target 混合(Util.mix 或 Util.augment)进想要自定义事件的对象,那么这个对象就可以进行自定义事件了。</p>
- <h2 id="简单引用">简单引用</h2><pre><code><span class="hljs-built_in">require</span>([<span class="hljs-string">'event-custom'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(CustomEvent)</span></span>{
- <span class="hljs-comment">//use CustomEvent...</span>
- })
- </code></pre><h2 id="自定义事件简单示例">自定义事件简单示例</h2><pre><code><span class="hljs-built_in">require</span>([<span class="hljs-string">'util'</span>, <span class="hljs-string">'event-custom'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(Util, CustomEvent)</span></span>{
- <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Dog</span><span class="hljs-params">(name)</span></span>{
- <span class="hljs-keyword">this</span>.name = name;
- }
- Util.augment(Dog, CustomEvent.Target, {
- shout : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
- <span class="hljs-keyword">this</span>.fire(<span class="hljs-string">'shout'</span>,{
- content : <span class="hljs-string">'I am hungry...'</span>
- });
- }
- });
- <span class="hljs-keyword">var</span> myDog = <span class="hljs-keyword">new</span> Dog(<span class="hljs-string">'cuteDog'</span>);
- myDog.on(<span class="hljs-string">'shout'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(ev)</span></span>{
- alert(<span class="hljs-keyword">this</span>.name + <span class="hljs-string">'say that '</span> + ev.conent);
- });
- myDog.shout();
- })
- </code></pre><h2 id="继承Base的类成员可以自定义事件">继承Base的类成员可以自定义事件</h2><p>事件本身是一个抽象概念,和平台无关、和设备无关、更和浏览器无关,浏览器只是使用“事件”的方法来触发特定的行为,进而触发某段网页逻辑。而常见的DOM事件诸如click,dbclick是浏览器帮我们实现的“特定行为”。而这里的“特定行为”就是触发事件的时机,是可以被重新定义的,原理上,事件都是需要精确的定义的,比如下面这个例子,我们定义了一个新事件:“初始化1秒后”</p>
- <p>这里我们使用Base内嵌的事件对象来描述</p>
- <pre><code><span class="hljs-comment">// 为了便于理解,这里用 define 写成模块将代码隔离开</span>
- <span class="hljs-comment">// 实现Klass内部的自定义事件</span>
- define(<span class="hljs-string">'klass'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(Base)</span></span>{
- <span class="hljs-comment">// Klass 是一个类,它在被实例化后1秒会触发一个事件"afterOneSecond"</span>
- <span class="hljs-keyword">var</span> Klass = Base.extend({
- initializer:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
- <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
- <span class="hljs-comment">// Your Code</span>
- setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
- <span class="hljs-keyword">self</span>.fire(<span class="hljs-string">'afterOneSecond'</span>,{
- a:<span class="hljs-number">1</span>,b:<span class="hljs-number">2</span> <span class="hljs-comment">//挂两个回调属性</span>
- });
- },<span class="hljs-number">1000</span>);
- }
- },{<span class="hljs-comment">/*ATTRS*/</span>});
- <span class="hljs-keyword">return</span> Klass;
- },{
- requires:[<span class="hljs-string">'base'</span>]
- });
- <span class="hljs-comment">// 绑定自定义事件</span>
- <span class="hljs-keyword">require</span>(<span class="hljs-string">'klass'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(S,Klass)</span></span>{
- <span class="hljs-comment">// 初始化这个类</span>
- <span class="hljs-keyword">var</span> k = <span class="hljs-keyword">new</span> Klass();
- <span class="hljs-comment">// 绑定事件监听</span>
- k.on(<span class="hljs-string">'afterOneSecond'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span></span>{
- alert(<span class="hljs-string">'1秒后触发这里的逻辑'</span>);
- <span class="hljs-comment">// e.a === 1</span>
- <span class="hljs-comment">// e.b === 1</span>
- });
- });
- </code></pre><p>这是一个很纯粹的自定义事件(Base组件内置自定义事件机制),它有事件名称“afterOneSecond”,有事件的触发条件<code>self.fire('afterOneSecond')</code>,有事件的绑定,<code>k.on('afterOneSecond')</code>。这样这个事件就能顺利的发生,并被成功监听。在代码组织层面,一般<code>Klass</code>类中实现了事件命名、定义和实现,属于内聚的功能实现。而绑定事件时可以是Klass这段代码的用户,他不会去关心事件的具体实现,只要关心Klass"暴露了什么事件可以让我绑定"就可以了,这就是KISSY中使用自定义事件的用法。你可以通过Base来创建自定义事件。</p>
- </div>
- </div>
- </div>
- </div>
- <div class="footer">
- <div class="wrap-disqus">
- <div class="top-repeat"></div>
- <div id="disqus_thread"></div>
- </div>
- <script>
- if((window.location.hostname.indexOf("kissyui.com")!=-1 )&& window.localStorage.getItem("kissy-commment")!="0"){
- /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
- var disqus_shortname = 'kissy-docs'; // required: replace example with your forum shortname
- // The following are highly recommended additional parameters. Remove the slashes in front to use.
- //var disqus_identifier = '/anim';
- //var disqus_url = window.location;
- /* * * DON'T EDIT BELOW THIS LINE * * */
- (function() {
- var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
- dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
- (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
- })();
- }
- </script>
- <div class="other-page">
- <div class="wrap">
- <div class="content">
- <div class="wrap-content">
- <p>@2010 - 2112 KISSY UI LIBARAY</p>
- <div class="github-msg">
- <iframe src="http://ghbtns.com/github-btn.html?user=kissyteam&repo=kissy&type=watch&count=true"
- allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
- <iframe src="http://ghbtns.com/github-btn.html?user=kissyteam&repo=kissy&type=fork&count=true"
- allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>