tests/manual/valuechange-delegate.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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>