Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @wazp/eventhandler with all npm packages installed. Try it out:

var eventhandler = require("@wazp/eventhandler")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@wazp/eventhandler v0.1.0

quick and dirty EventHandler singleton to keep track of event listeners

EventHandler

Quick and dirty Event Handler singleton that handles namespacing of events.

At the moment it only handles native events

Please note

You will need to run through babel and possibly polyfill yourself, as we do not transpile this for you at all.

How to use:

import { EventHandler } from 'EventHandler'

// works with NodeList, both with one and multiple elements
const mySingleElement = document.querySelector(`#uniqueID`)
const myMultipleElements = document.querySelectorAll(`.my-elements`)

EventHandler.addListener(mySingleElement, `click.singleElements`, clickEvent)
EventHandler.addListener(myMultipleElements, `click.multipleElements`, clickEvent)

// also works with HTMLCollections
const myId = document.getElementById(`#anotherUniqueID`)
const myClasses = document.getElementsByClassName('.my-other-elements')

EventHandler.addListener(myId, `click.myId`, clickEvent)
EventHandler.addListener(myClasses, `click.myClasses`, clickEvent)

// you can also send in a selector directly
EventHandler.addListener(`#myId .classInside`, `click.mySelector`, clickEvent)

todo

  • [ ] Make it work with custom events as well
  • [ ] Handle elements added to DOM at a later time
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free