Global DOM Listener

       

A global listener for current AND dynamically added DOM elements in the browser.

Getting Started | Example

⚙️ Installation

Using CDN

You can use the hosted CDN file directly in your browser/html :

<script src="https://cdn.jsdelivr.net/npm/@mattickx/global-dom-listener/dist/index.umd.js"></script>

Using the NPM package

You can install the npm package by using :

pnpm add @mattickx/global-dom-listener

npm install @mattickx/global-dom-listener

yarn add @mattickx/global-dom-listener

🔧 Quick start

Listen to a DOM event using a selector.

ID selector:

window.GlobalDOMListener.on('click', '#custom-id', (event) => {
  // Do something ...
  // event.target will be an instance of an element matching the selector
});

Class selector:

window.GlobalDOMListener.on('keydown', '.custom-class', (event) => {
  // Do something ...
  // event.target will be an instance of an element matching the selector
});

Data attribute selector:

window.GlobalDOMListener.on('blur', '[data-custom-attribute]', (event) => {
  // Do something ...
  // event.target will be an instance of an element matching the selector
});

🔧 Working example

See a working examle in this HTML file

🤝 Contribute

Continuous improvement is encouraged and your contributions are valuable!

If you identify areas for improvement, have suggestions or encounter issues, please create a GitHub issue.

📜 LICENSE

This is licensed under the MIT License, see LICENSE