656868b0c592b5307371e3733488d66ac3de2654df4d75c7077bdb2efb902d1d2b64e562760e8a5eca8294ad8b5a8838634f2f23f56d19d03898bf10d01112 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. # delegate
  2. Lightweight event delegation.
  3. ## Install
  4. You can get it on npm.
  5. ```
  6. npm install delegate --save
  7. ```
  8. If you're not into package management, just [download a ZIP](https://github.com/zenorocha/delegate/archive/master.zip) file.
  9. ## Setup
  10. ###### Node (Browserify)
  11. ```js
  12. var delegate = require('delegate');
  13. ```
  14. ###### Browser (Standalone)
  15. ```html
  16. <script src="dist/delegate.js"></script>
  17. ```
  18. ## Usage
  19. ### Add event delegation
  20. #### With the default base (`document`)
  21. ```js
  22. delegate('.btn', 'click', function(e) {
  23. console.log(e.delegateTarget);
  24. }, false);
  25. ```
  26. #### With an element as base
  27. ```js
  28. delegate(document.body, '.btn', 'click', function(e) {
  29. console.log(e.delegateTarget);
  30. }, false);
  31. ```
  32. #### With a selector (of existing elements) as base
  33. ```js
  34. delegate('.container', '.btn', 'click', function(e) {
  35. console.log(e.delegateTarget);
  36. }, false);
  37. ```
  38. #### With an array/array-like of elements as base
  39. ```js
  40. delegate(document.querySelectorAll('.container'), '.btn', 'click', function(e) {
  41. console.log(e.delegateTarget);
  42. }, false);
  43. ```
  44. ### Remove event delegation
  45. #### With a single base element (default or specified)
  46. ```js
  47. var delegation = delegate(document.body, '.btn', 'click', function(e) {
  48. console.log(e.delegateTarget);
  49. }, false);
  50. delegation.destroy();
  51. ```
  52. #### With multiple elements (via selector or array)
  53. Note: selectors are always treated as multiple elements, even if one or none are matched. `delegate()` will return an array.
  54. ```js
  55. var delegations = delegate('.container', '.btn', 'click', function(e) {
  56. console.log(e.delegateTarget);
  57. }, false);
  58. delegations.forEach(function (delegation) {
  59. delegation.destroy();
  60. });
  61. ```
  62. ## Browser Support
  63. | <img src="https://clipboardjs.com/assets/images/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="https://clipboardjs.com/assets/images/edge.png" width="48px" height="48px" alt="Edge logo"> | <img src="https://clipboardjs.com/assets/images/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="https://clipboardjs.com/assets/images/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="https://clipboardjs.com/assets/images/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="https://clipboardjs.com/assets/images/safari.png" width="48px" height="48px" alt="Safari logo"> |
  64. |:---:|:---:|:---:|:---:|:---:|:---:|
  65. | Latest ✔ | Latest ✔ | Latest ✔ | 9+ ✔ | Latest ✔ | Latest ✔ |
  66. ## License
  67. [MIT License](http://zenorocha.mit-license.org/) © Zeno Rocha