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.
<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 'baz' depending 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' })
})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
})npm install dom-delegator
- Raynos