Skip to content

Instantly share code, notes, and snippets.

@Satyam

Satyam/Bubbling Events

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.
Download ZIP
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.
Raw
Bubbling Events
<!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