easy add/remove event on html elements
The lastest version of this document is available on Github > htmlelement-events-extension
npm install htmlelement-events-extension --save
or
yarn add htmlelement-events-extension --save
<script src="node_modules/htmlelement-events-extension/distrib/htmlelement-events-extension.min.js"></script>
- on ~ addEventListener
- off ~ removeEventListener
- trigger ~dispatchEvent
- NoContextMenu() disabled contextMenu on HTMLElement
HTMLElement.on(eventNames,fn,option)
string eventNames: events names know like keydown, mousedown, click ...
you can put several events name separed by space
don't prefix by word "on"
function fn: callback to call
object option : object with
{
once: true,
passive: true,
capture: true
}
once => true, the event can only be called once, polyfill for IE
HTMLElement.on(eventNames,fn)
string eventNames: events names know like keydown, mousedown, click ...
you can put several events name separed by space
don't prefix by word "on"
function fn: callback to uninstall
if fn is omit, uninstall all callbacks according to eventNames
The API can set or unset multiples events on multiples HTMLElements with one instruction
example
document.querySelectorAll("input").off("keydown keyup",trace);
- trigger : fire custom event with details, this event can also be listened with method document.on
example
function traceDetail(ev) {
console.log(ev.detail);
}
document.on("custom", traceDetail);
document.trigger("custom",{a:1,b:2});
=> {a:1,b:2}
special event name can be used with on
and off
method
- longmousedown : event fired when the mouse stays pressed for a while
- longkeydown : event fired when one key stays pressed for a while
- nocontextmenu : active/deactivate context menu
- clickoutside : event fired when user clicks outside a element
- multiclick : event fired when user clicks 3 times quickly on a element
See Demo
Note: tests passing with Chrome, Firefox, IE11