JSPM

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

Create DOM event handlers that write to sinks

Package Exports

  • value-event/base-event
  • value-event/base-event.js
  • value-event/change
  • value-event/click
  • value-event/click.js
  • value-event/event
  • value-event/key
  • value-event/submit
  • value-event/value

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 (value-event) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

value-event

Create DOM event handlers that write to listeners

Example (event)

<div id='foo'>
  <div class='name'>Bob Steve</div>
  <input class='name' value='Bob Steve'></input>
</div>
var event = require('value-event/event')
var listener = function (data) {
  console.log('data', data)
}

var elem = document.getElementById('foo')
elem.querySelector('div.name')
  .addEventListener('click', event(listener, {
    clicked: true
  }))
elem.querySelector('input.name')
  .addEventListener('keypress', event(listener, {
    changed: true
  }))

Example (change)

The change event happens when form elements change

For example:

  • someone types a character in an input field
  • someone checks or unchecks a checkbox
<div id='my-app'>
  <input name='foo' value='bar' />
</div>
var changeEvent = require('value-event/change')
var listener = function (data) {
  console.log('data', data.changed, data.foo)
}

var elem = document.getElementById('my-app')
elem
  .addEventListener('input', changeEvent(listener, {
    changed: true
  }))

Example (submit)

The submit event happens when form elements get submitted.

For example:

  • a button gets clicked
  • someone hits ENTER in an input field
<div id='my-app'>
  <input name='foo' value='bar' />
</div>
var submitEvent = require('value-event/submit')
var listener = function (data) {
  console.log('data', data.changed, data.foo)
}

var elem = document.getElementById('my-app')
elem
  .addEventListener('keypress', submitEvent(listener, {
    changed: true
  }))

Example (value)

The value event happens whenever the event listener fires. It attaches input values just like 'submit' and 'change' except it doesn't have special semantics of what's a valid event.

<div id='my-app'>
  <input name='foo' value='bar' />
</div>
var valueEvent = require('value-event/value')
var listener = function (data) {
  // currentValues is { 'foo': 'bar' }
  console.log('data', data.changed, data.foo)
}

var elem = document.getElementById('my-app')
elem.querySelector('input.name')
  .addEventListener('blur', valueEvent(listener, {
    changed: true
  }))

Installation

npm install value-event

Contributors

  • Raynos

MIT Licenced