Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    dom-delegatorpublic

    dom-delegator

    Decorate elements with delegated events

    dom-delegator allows you to attach an EventHandler to a dom element.

    When event of the correct type occurs dom-delegator will invoke your EventHandler

    This allows you to seperate your event listeners from your event writers. Sprinkle your event writers in the template in one part of your codebase. Attach listeners to the event sources in some other part of the code base.

    This decouples the event definition in the DOM from your event listeners in your application code.

    Also see html-delegator for the same idea using html data- attributes.

    Example

    <div class='foo'>
        <div class='bar'>bar</div>
        <div class='baz'>baz</div>
    </div>
    var document = require("global/document")
    var Delegator = require("dom-delegator")
    var EventEmitter = require("events").EventEmitter
     
    var del = Delegator()
    var emitter = EventEmitter()
    emitter.on('textClicked', function (value) {
        // either 'bar' or 'bar' depends on which  
        // `<div>` was clicked 
        console.log("doSomething", value.type)
    })
     
    var elem = document.querySelector(".foo")
     
    // add individual elems. (in a different file?) 
    del.addEventListener(elem.querySelector(".bar"), "click", function (ev) {
      emmitter.emit('textClicked', { type: 'bar' })
    })
    del.addEventListener(elem.querySelector(".baz"), "click", function (ev) {
      emitter.emit('textClicked', { type: 'baz' })
    })

    Example (global listeners)

    Sometimes you don't want to add events bound to an element but instead listen to them globally.

    var Delegator = require("dom-delegator")
     
    var d = Delegator()
    d.addGlobalEventListener("keydown", function (ev) {
        // hit for every global key press 
        // can implement keyboard shortcuts 
     
     
    })
     
    d.addEventListener(document.documentElement, "keydown", function (ev) {
        // hit for every keydown that is not captured 
        // by an element listener lower in the tree 
     
        // by default dom-delegator does not bubble events up 
        // to other listeners on parent nodes 
     
        // you can use global event listeners to intercept everything 
        // even if there are listeners lower in the tree 
    })

    Installation

    npm install dom-delegator

    Contributors

    • Raynos

    MIT Licenced

    Keywords

    none

    install

    npm i dom-delegator

    Downloadslast 7 days

    994

    version

    13.1.0

    license

    none

    repository

    github.com

    last publish

    collaborators

    • avatar