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 ) {
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
MIT Licenced