dom-event-listener

Cross-browser event listeners made out of the box.

Installation

Just get it from the npm.

npm i dom-event-listener --save

Setup

Browserify

var domEventListener = require('dom-event-listener');

ES6

import domEventListener from 'dom-event-listener';

Usage

Adding an event listener

import domEventListener from 'dom-event-listener';
 
let element = document.getElementById('my-element');
 
domEventListener.add(element, 'click', (event) => {
    console.log(event);
});

Removing an event listener

import domEventListener from 'dom-event-listener';
 
let element = document.getElementById('my-element');
 
function onClick(event) {
  console.log(event);
}
 
domEventListener.add(element, 'click', onClick);
domEventListener.remove(element, 'click', onClick);

Fancy keeping your scope?

Pass an object with a handleEvent function.

import domEventListener from 'dom-event-listener';
 
let element = document.getElementById('my-element');
 
let object = {
  value: 'some random value',
  handleEvent: function (event) {
    console.log(this.value);
    console.log(event);
  }
};
 
domEventListener.add(element, 'click', object);
domEventListener.remove(element, 'click', object);

The event object

Getting cross browser properties:

currentTarget

var element = event.currentTarget;

target

var element = event.target;

preventDefault

event.preventDefault();

Browser Support

Latest ✔	Latest ✔	IE 8+ ✔	Latest ✔	Latest ✔

License

[MIT License] © Florian Barbare