Package Exports
- dom-delegator
- dom-delegator/add-event
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dom-delegator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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' })
})Installation
npm install dom-delegator
Contributors
- Raynos