htmlelement-events-extension

easy add/remove event on html elements

The lastest version of this document is available on Github > htmlelement-events-extension

Installation

npm install htmlelement-events-extension --save

or

yarn add htmlelement-events-extension --save

prerequisites

for browser

<script src="node_modules/htmlelement-events-extension/distrib/htmlelement-events-extension.min.js"></script>

Availables Operations

on HTMLElement, window & document

- on ~ addEventListener
- off ~ removeEventListener
- fireEvent ~trigger ~dispatchEvent
- NoContextMenu() disabled contextMenu on HTMLElement

HTMLElement.on

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.off

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

NodeList.on, NodeList.off

The API can set or unset multiples events on multiples HTMLElements with one instruction

example

    document.querySelectorAll("input").off("keydown keyup",trace);

document

- fireEvent  : 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.fireEvent("custom",{a:1,b:2});

    => {a:1,b:2}

Specials EventNames

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

usage

See Demo

Note: tests passing with Chrome, Firefox, IE11