forked from honeinc/emit-bindings
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
83 lines (62 loc) · 3.67 KB
/
index.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="../build/emit-bindings-1.1.1.js"></script>
<script type="text/javascript">
var emit = require( 'emit-bindings' );
emit.on( 'unhandled', console.log.bind( console, 'unhandled' ) );
emit.on( 'foo', console.log.bind( console, 'foo' ) );
emit.on( 'bar', console.log.bind( console, 'bar' ) );
emit.on( 'baz.wrapper', console.log.bind( console, 'baz.wrapper' ) );
emit.on( 'baz', console.log.bind( console, 'baz' ) );
emit.on( 'yak', console.log.bind( console, 'yak' ) );
emit.on( 'submitted', console.log.bind( console, 'submitted' ) );
emit.on( 'input.changed', console.log.bind( console, 'input.changed' ) );
emit.on( 'debounced.changed', console.log.bind( console, 'debounced.changed' ) );
emit.on( 'checked', console.log.bind( console, 'checked' ) );
emit.on( 'selected', console.log.bind( console, 'selected' ) );
emit.on( 'submit.clicked', console.log.bind( console, 'submit.clicked' ) );
emit.on( 'floog', console.log.bind( console, 'floog' ) );
emit.on( 'should.not.be.emitted', console.log.bind( console, 'should.not.be.emitted', 'oops!' ) );
emit.on( 'bloop', console.log.bind( console, 'bloop' ) );
</script>
<a href="" data-emit='foo'>Emit 'foo'</a>
<hr>
<a href="" data-emit='bar'>Emit 'bar'</a>
<hr>
<div data-emit='baz.wrapper'>
<a href="" data-emit='baz' data-emit-options="allowpropagate">Emit 'baz' and, due to propagation, 'baz.wrapper'.</a>
</div>
<hr>
<a data-emit='yak' href="#yak" data-emit-options="allowdefault">Emit 'yak' and allow default navigation to #yak.</a>
<hr>
<a href="" data-emit='yak,foo,bar'>Emit 'yak', 'foo' and 'bar' events.</a>
<hr>
<!-- emits 'submitted' on form submit -->
<form data-emit="submitted">
<!-- emits 'input.changed' on input -->
<input type="text" data-emit="input.changed" />
<!-- debounce emits, only emitting after 250ms have passed since last input -->
<input type="text" data-emit="debounced.changed" data-emit-options="debounce" />
<!-- allowdefault will let the checkbox check -->
<input type="checkbox" data-emit="checked" data-emit-options="allowdefault">This is a checkbox.</input>
<!-- allowdefault will let the radio button select -->
<input type="radio" data-emit="selected" data-emit-options="allowdefault">This is a radio button.</input>
<!-- allowdefault will let the form submission event fire -->
<input type="submit" value="Submit" data-emit="submit.clicked" data-emit-options="allowdefault" />
</form>
<hr>
<!-- catch click/touch event -->
<div style="border: 1px solid black; padding: 30px; text-align: center;" data-emit="">
<a data-emit='floog'>Emit 'floog' but clicking elsewhere in this div should *not* produce an 'unhandled' event.</a>
</div>
<!-- let the a tag handle the event, even with a div inside it. -->
<div style="border: 1px solid black; padding: 30px; text-align: center;" data-emit="should.not.be.emitted">
<a href="#alinkhandled"><div style="width: 100px; height: 100px; background: blue; color: white; font-weight: bold;">Test an anchor tag with a div inside it.</div></a>
</div>
<!-- let the a tag handle the event, even with a div inside it. -->
<div style="border: 1px solid black; padding: 30px; text-align: center;" data-emit="should.not.be.emitted">
<a data-emit="bloop"><div style="width: 100px; height: 100px; background: blue; color: white; font-weight: bold;">Test an anchor tag with a div inside it emitting a 'bloop'.</div></a>
</div>
</body>
</html>