Skip to content

Instantly share code, notes, and snippets.

@Satyam
Created January 17, 2013 18:42
Show Gist options
  • Save Satyam/4558451 to your computer and use it in GitHub Desktop.
Save Satyam/4558451 to your computer and use it in GitHub Desktop.
Showing how custom events (from EventTarget) can bubble up through several objects, how to add information to the event facade and what happens when they are canceled.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://yui.yahooapis.com/3.8.0/build/yui/yui.js"></script>
</head>
<body class="yui3-skin-sam">
<script>
// Create a new YUI instance and populate it with the required modules.
YUI().use('base', 'base-build', function (Y) {
var Leaf = Y.Base.create('leaf', Y.Base, [], {
initializer: function () {
this.publish('bip',{defaultFn:this._defBipFn});
},
bip: function(n) {
console.log('bip', n);
this.fire('bip', {n: n});
},
_defBipFn: function (ev) {
console.log('_defBipFn', ev.type, ev.n, ev.onThis, ev.onLeaf);
}
});
var Middle = Y.Base.create('middle', Y.Base, [], {
initializer: function () {
var l = new Leaf();
l.addTarget(this);
this.on('*:bip', this._onThisBip);
this.after('*:bip', this._afterThisBip);
l.on('bip', this._onLeafBip, this);
l.after('bip', this._afterLeafBip, this);
this.leaf = l;
},
_onThisBip: function (ev) {
console.log('_onThisBip:', ev.type, ev.n, ev.onThis, ev.onLeaf);
ev.onThis = 'onThis';
if (ev.n === 1) {
ev.halt();
console.log('_onThisBip: halt');
}
},
_afterThisBip: function (ev) {
console.log('_afterThisBip:', ev.type, ev.n, ev.onThis, ev.onLeaf);
},
_onLeafBip: function (ev) {
console.log('_onLeafBip:', ev.type, ev.n, ev.onThis, ev.onLeaf);
ev.onLeaf = 'onLeaf';
if (ev.n === 2) {
ev.halt();
console.log('_onLeafBip: halt');
}
},
_afterLeafBip: function (ev) {
console.log('_afterLeafBip:', ev.type, ev.n, ev.onThis, ev.onLeaf);
}
});
var m = new Middle();
m.on('*:bip', function (ev) {
console.log('onMiddle', ev.type, ev.n, ev.onThis, ev.onLeaf);
if (ev.n == 3) {
console.log('outer: halt');
ev.halt();
}
});
m.after('*:bip', function (ev) {
console.log('afterMiddle', ev.type, ev.n, ev.onThis, ev.onLeaf);
});
m.leaf.bip(0);
m.leaf.bip(1);
m.leaf.bip(2);
m.leaf.bip(3);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment