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