multiple.html 855 B

12345678910111213141516171819202122232425262728293031323334353637
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Delegate</title>
  6. </head>
  7. <body>
  8. <!-- 1. Write some markup -->
  9. <ul>
  10. <li><button>Item 1</button></li>
  11. <li><button>Item 2</button></li>
  12. <li><button>Item 3</button></li>
  13. <li><button>Item 4</button></li>
  14. <li><button>Item 5</button></li>
  15. </ul>
  16. <ul>
  17. <li><span>Item 6</span></li>
  18. <li><span>Item 7</span></li>
  19. </ul>
  20. <!-- 2. Include library -->
  21. <script src="../dist/delegate.js"></script>
  22. <!-- 3. Add event delegation -->
  23. <script>
  24. var ul = document.querySelector('ul');
  25. delegate(ul, 'button', 'click', function(e) {
  26. console.log(e.target);
  27. });
  28. delegate(document.body, 'span', 'click', function(e) {
  29. console.log(e.target);
  30. });
  31. </script>
  32. </body>
  33. </html>