1 | <html>
|
2 | <head>
|
3 | <title>Events</title>
|
4 | <style>
|
5 | body {
|
6 | padding: 150px;
|
7 | }
|
8 | ul li {
|
9 | padding: 5px;
|
10 | }
|
11 | </style>
|
12 | </head>
|
13 | <body>
|
14 | <ul>
|
15 | <li><a href="#">One</a></li>
|
16 | <li><a href="#">Two</a></li>
|
17 | <li><a href="#">Three</a></li>
|
18 | </ul>
|
19 | <button onclick="unbind()">Unbind</button>
|
20 | <script src="../build/build.js"></script>
|
21 | <script>
|
22 | var Events = require('events');
|
23 | var ul = document.querySelector('ul');
|
24 |
|
25 | var events = Events(ul, {
|
26 | onclick: function(e){
|
27 | alert('clicked ' + e.target.textContent)
|
28 | },
|
29 |
|
30 | first: function(e){
|
31 | alert('clicked the first');
|
32 | }
|
33 | });
|
34 |
|
35 | events.bind('click li > a');
|
36 | events.bind('click li:first-child > a', 'first');
|
37 |
|
38 | function unbind() {
|
39 | events.unbind('click', 'onclick');
|
40 |
|
41 |
|
42 | }
|
43 | </script>
|
44 | </body>
|
45 | </html>
|