JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 502
  • Score
    100M100P100Q100038F

Decorate elements with delegated events

Package Exports

  • dom-delegator
  • dom-delegator/add-event
  • dom-delegator/create-delegator
  • dom-delegator/dom-surface
  • dom-delegator/symbol/get-field

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 a Sink to a dom element.

When event of the correct type occurs dom-delegator will write your value to the Sink.

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

var document = require("global/document")
var Delegator = require("dom-delegator")
var h = require("hyperscript")
var addEvent = require("dom-delegator/add-event")
var EventSinks = require("event-sinks/geval")

var delegator = Delegator(document.body)
var events = EventSinks(delegator.id, ["textClicked"])
var sinks = events.sinks
var elem = h("div.foo", [
    h("div.bar", "bar"),
    h("span.baz", "baz")
])
var bar = elem.querySelector(".bar")
var baz = elem.querySelector(".baz")
document.body.appendChild(elem)


// add individual elems. (in a different file?)
addEvent(bar, "click", sinks.textClicked, {
  type: "bar"
})
addEvent(baz, "click", sinks.textClicked, {
  type: "baz"
})

// add a listener, (in a different file?)
events.textClicked(function (tuple) {
    var value = tuple.value

    console.log("doSomething", value.type)
})

Installation

npm install dom-delegator

Contributors

  • Raynos

MIT Licenced