d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove<!DOCTYPE html>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove<html>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove<head>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove <meta charset="utf-8">
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove <title>event-valuechange delegation test</title>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove</head>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove<body>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove<h1>event-valuechange delegation test</h1>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove<form id="container">
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove <p><input type="text" id="a" class="odd"></p>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove <p><input type="text" id="b" class="even"></p>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove <p><input type="text" id="c" class="odd"></p>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove <p><textarea id="d" class="even"></textarea></p>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove <p><textarea id="e" class="odd"></textarea></p>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove <p><textarea id="f" class="even"></textarea></p>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove</form>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove<button id="unsubscribe">Unsubscribe</button>
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove<button id="subscribe">Subscribe</button>
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove<script src="/build/yui/yui.js"></script>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove<script>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grovevar Y = YUI({filters: {'event-valuechange': 'debug'}}).use('event-valuechange', 'node-event-delegate', function (Y) {
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove var form = Y.one('#container'),
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove events = [];
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove function subscribe() {
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove events.push(form.delegate('valuechange', function (e) {
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove Y.log('#' + e.currentTarget.get('id') + ' .odd: "' + e.prevVal + '" -> "' + e.newVal + '"');
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove }, '.odd'));
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove events.push(form.delegate('valuechange', function (e) {
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove Y.log('#' + e.currentTarget.get('id') + ' .even: "' + e.prevVal + '" -> "' + e.newVal + '"');
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove }, '.even'));
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove events.push(form.delegate('valuechange', function (e) {
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove Y.log('#' + e.currentTarget.get('id') + ' function: "' + e.prevVal + '" -> "' + e.newVal + '"');
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove }, function (node) {
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove return node.getAttribute('type') === 'text';
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove }));
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove }
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove function unsubscribe() {
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove Y.Array.each(events, function (e) {
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove e.detach();
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove });
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove events = [];
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove }
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove Y.one('#subscribe').on('click', subscribe);
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove Y.one('#unsubscribe').on('click', unsubscribe);
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove
817fd44279e274b210f7f29c8080c1f2d121f4f8Ryan Grove subscribe();
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove});
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove</script>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove</body>
d4f85910579f62260db7d61c5203ac0a4edac8fdRyan Grove</html>