1. good-listener
A more versatile way of adding & removing event listeners
good-listener
Package: good-listener
Created by: zenorocha
Last modified: Sat, 18 Jun 2022 13:21:23 GMT
Version: 1.2.2
License: MIT
Downloads: 6,120,748
Repository: https://github.com/zenorocha/good-listener

Install

npm install good-listener
yarn add good-listener

good-listener

Build Status

A more versatile way of adding & removing event listeners.

good listener

Install

You can get it on npm.

npm install good-listener --save

Or bower, too.

bower install good-listener --save

If you're not into package management, just download a ZIP file.

Setup

Node (Browserify)
 var listen = require('good-listener');
Browser (Standalone)
 <script src="dist/good-listener.js"></script>

Usage

Add an event listener

By passing a string selector (see full demo).

 listen('.btn', 'click', function(e) {
    console.log(e);
});

Or by passing a HTML element (see full demo).

 var logo = document.getElementById('logo');

listen(logo, 'click', function(e) {
    console.log(e);
});

Or by passing a list of HTML elements (see full demo).

 var anchors = document.querySelectorAll('a');

listen(anchors, 'click', function(e) {
    console.log(e);
});

Remove an event listener

By calling the destroy function that returned from previous operation (see full demo).

 var listener = listen('.btn', 'click', function(e) {
    console.log(e);
});

listener.destroy();

Browser Support

Chrome logo Edge logo Firefox logo Internet Explorer logo Opera logo Safari logo
Latest ✔ Latest ✔ Latest ✔ 9+ ✔ Latest ✔ Latest ✔

License

MIT License © Zeno Rocha

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin