Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
YUI3 EventTarget
Search
ningzbruc
January 24, 2013
Technology
1
62
YUI3 EventTarget
This presentation shows how YUI3 Custom Event System works!
ningzbruc
January 24, 2013
Tweet
Share
More Decks by ningzbruc
See All by ningzbruc
如何写出一个优秀的开源库
ningzbruc
0
47
去啊无线前端的一天
ningzbruc
1
150
React & Component
ningzbruc
0
33
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
250
KISSY.Base - all about that Base
ningzbruc
0
110
Hammer.js
ningzbruc
1
330
淘宝旅行门票iPad版开发
ningzbruc
0
120
Travel on KISSY mini
ningzbruc
0
180
Events
ningzbruc
2
120
Other Decks in Technology
See All in Technology
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
2
140
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
510
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
120
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
600
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
120
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
150
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
230
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
510
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
160
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
220
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
340
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
150
Featured
See All Featured
Visualization
eitanlees
148
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
How GitHub (no longer) Works
holman
315
140k
Mobile First: as difficult as doing things right
swwweet
224
10k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
How STYLIGHT went responsive
nonsquared
100
5.8k
Transcript
YUI3 Custom Event System ]{
Pub/Sub
Observer Design Pattern
Subject Observer Notify Attach
YUINode.on('click', function(e) { console.log(e.type); // click });
Subject Observer
MySlider.on('switch', function(e) { // more code here
});
Y.EventTarget
Y.EventTarget Y.CustomEvent Y.Subscriber Y.EventHandle Y.EventFacade
// Step 1 var MyEventTarget = new Y.EventTarget(); //
Step 2 var MyCustomEvent = ET.publish('myevent'); // Step 3 var MySubscriber = function(MyEventFacade) { // Step 6 console.log(MyEventFacade.foo); // 1 }; // Step 4 var MyEventHandle = MyEventTarget.on('myevent', MySubscriber); // Step 5 ET.fire('myevent', { foo: 1, bar: 2 }); // Step 7 MyEventHandle.detach();
publish on fire ... Y.EventTarget _yuievt.events {eventtype: new Y.CustomEvent()}
on fire detach ... Y.CustomEvent subscribers {id: new Y.Subscriber()}
notify ... Y.Subscriber fn context args id
detach batch ... Y.EventHandle evt: Y.CustomEvent sub: Y.Subscriber
preventDefault stopPropagation halt ... Y.EventFacade type target currentTarget details args
...
function MyWidget() { this.name = 'mywidget'; }
Y.augment(MyWidget, Y.EventTarget); // MyWidget.publish(...) // MyWidget.on(...) // MyWidget.fire(...)
Y Y.Global Attribute Base Widget Model ...
function Mod(name) { this.name = name;
this.publish('render', { fireOnce: true }); } Y.augment(Mod, Y.EventTarget); Mod.prototype = { render: function() { // more code this.fire('render', { args: YArray(arguments, 0, true) }); return this; } }; Mod.create = function(name, methods) { return Y.mix(new Mod(name), methods); }
var Mod_A = Mod.create('a', { getModBData: function()
{ Mod_B.on('render', function(e) {...}) } }); var Mod_B = Mod.create('b', methods); Mod_A.render().getModBData(); // more code // lazyload Mod_B.render();
Just Do It!
Y.Do
Y.Do.before(fn, obj, sFn, c, args)
None
The end. ]{