c94ac123c0736e8a1330f99b25a0cd7f3bc05ca866c386a19af53ab2229f4a243365af67053e6304d3ecee42c5b45fb25938daa692d5de3d693dc86d01c629 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. # good-listener
  2. [![Build Status](http://img.shields.io/travis/zenorocha/good-listener/master.svg?style=flat)](https://travis-ci.org/zenorocha/good-listener)
  3. > A more versatile way of adding & removing event listeners.
  4. ![good listener](https://cloud.githubusercontent.com/assets/398893/10718224/dfc25f6c-7b2a-11e5-9d3d-75b35e8603c8.jpg)
  5. ## Install
  6. You can get it on npm.
  7. ```
  8. npm install good-listener --save
  9. ```
  10. Or bower, too.
  11. ```
  12. bower install good-listener --save
  13. ```
  14. If you're not into package management, just [download a ZIP](https://github.com/zenorocha/good-listener/archive/master.zip) file.
  15. ## Setup
  16. ###### Node (Browserify)
  17. ```js
  18. var listen = require('good-listener');
  19. ```
  20. ###### Browser (Standalone)
  21. ```html
  22. <script src="dist/good-listener.js"></script>
  23. ```
  24. ## Usage
  25. ### Add an event listener
  26. By passing a string selector [(see full demo)](https://github.com/zenorocha/good-listener/blob/master/demo/selector.html).
  27. ```js
  28. listen('.btn', 'click', function(e) {
  29. console.log(e);
  30. });
  31. ```
  32. Or by passing a HTML element [(see full demo)](https://github.com/zenorocha/good-listener/blob/master/demo/node.html).
  33. ```js
  34. var logo = document.getElementById('logo');
  35. listen(logo, 'click', function(e) {
  36. console.log(e);
  37. });
  38. ```
  39. Or by passing a list of HTML elements [(see full demo)](https://github.com/zenorocha/good-listener/blob/master/demo/nodelist.html).
  40. ```js
  41. var anchors = document.querySelectorAll('a');
  42. listen(anchors, 'click', function(e) {
  43. console.log(e);
  44. });
  45. ```
  46. ### Remove an event listener
  47. By calling the `destroy` function that returned from previous operation [(see full demo)](https://github.com/zenorocha/good-listener/blob/master/demo/destroy.html).
  48. ```js
  49. var listener = listen('.btn', 'click', function(e) {
  50. console.log(e);
  51. });
  52. listener.destroy();
  53. ```
  54. ## Browser Support
  55. | <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"> |
  56. |:---:|:---:|:---:|:---:|:---:|:---:|
  57. | Latest ✔ | Latest ✔ | Latest ✔ | 9+ ✔ | Latest ✔ | Latest ✔ |
  58. ## License
  59. [MIT License](http://zenorocha.mit-license.org/) © Zeno Rocha