On Functions JS: Attach and detach event handlers with on functions

Recommend this page to a friend!

Download .zip

Info

Documentation

Demos

Screenshots

View files (9)

Download .zip

Reputation

Support forum

Blog

Links

Last Updated		Ratings				Unique User Downloads		Download Rankings
2016-03-10 (7 months ago)		Not enough user ratings				Total: 79		All time: 416 This week: 22

Version		License		JavaScript version		Categories
`on-functions-js` 1.0.4		MIT/X Consortium ...		1.8		HTML, Events

Description Author

This packages can attach and detach event handlers with on functions.

It adds prototype functions to NodeList and HTMLElement objects like jQuery on and off functions to handle events with callback functions.

Multiple events can be registered to a given page element. It can also take selectors to define patterns of elements to register the event handlers.

Innovation Award

February 2016
Winner

Prize: One downloadable e-book of choice by O'Reilly

Many developers got used to jQuery because it provides a common interface that works with all supported browsers, as well provide functionality that not all browsers supported directly.

Modern browsers already support standards that implement that functionality without needing jQuery.

However, many developers are so used to jQuery that they now prefer jQuery syntax to perform certain actions like registering event listeners.

This object provides on and off functions to register event handlers similar to jQuery but with using jQuery.

Manuel Lemos

Andras Toth

Performance

Level

Name:	Andras Toth `<contact>`
Classes:	18 packages by Andras Toth
Country:	Hungary

Level 4

Innovation award

Nominee: 14x

Winner: 9x

Details

onFunctionsJS

Javascript jQuery like (NodeList and HTMLElement) on/off function

[Homepage] - Home page, demonstration

<img src="/icon.png">

</p>

Version

1.0.6

- Some minor bug fixed

Version

1.0.0

Required HTML & Javascript example

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>On/Off functions</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="container">
            <div class="left-side">
                <button>Button</button>
                <span>Span</span>
                <div class="img-div">
                    <img src="js.png">
                </div>
            </div>
            <div class="center"></div>
            <div class="right-side">
                <button>Button</button>
                <span>Span</span>
                <div class="img-div">
                    <img src="js.png">
                </div>
            </div>
        </div>
        <script src="onFunctionsJS.js" type="text/javascript"></script>
        <script type="text/javascript">
        var rightSide = document.querySelector('.right-side');
        /
         * Description: Attach an event handler function for one or more events to the selected elements.
         * @param  {string} One or more comma separated event types                 [required]
         * @param  {string} css selector string to filter the descendants 
         *         of the selected elements that trigger the event. 
         *         If the selector is null or omitted, the event is always 
         *         triggered when it reaches the selected element.                  [optional]
         * @param  {function} A function to execute when the event is triggered.    [required]
         */ 
        / Examples */
        rightSide.on('mouseenter, mouseleave', 'button, span, .img-div', function(e) {
            e.stopPropagation();
            if (e.type == 'mouseleave') {
                this.style.background = '';
            } else {
                this.style.background = 'green';
            }
        });
         document.querySelectorAll('.container').on('click', 'button', function (e) {
            console.log(this);
         });
        /
         * Description: Remove an event handler.
         * @param  {string} One or more comma separated event types                 [optional]
         * @param  {string} A selector which should match the one originally 
         *         passed to .on() when attaching event handlers.                   [optional]
         */ 
        / completely destroy */
        rightSide.off();
        / remove click an event handler from buttons */
        document.querySelectorAll('.container').off('click', 'button');
        / remove all click event handler */
        document.querySelectorAll('.container').off('click');
        </script>
    </body>
</html>

License

MIT

Author: Tóth András

http://atandrastoth.co.uk/

2015-06-10

[Homepage]:http://atandrastoth.co.uk/main/pages/plugins/onFunctionsJS/ [onFunctionsJS]:https://andrastoth.github.io/onFunctionsJS/

demo

Screenshots

Files

File	Role	Description
`doc.html`	Doc.	example
`icon.png`	Icon	Icon image
`index.html`	Doc.	Documentation
`js.png`	Icon	Icon image
`main.js`	Test	Unit test script
`MIT-License.txt`	Doc.	Documentation
`onFunctionsJS.js`	Class	Class source
`README.md`	Data	Auxiliary data
`style.css`	Data	Auxiliary data