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

Recommend this page to a friend!
  Info   View files Documentation   Demos   Screenshots Screenshots   View files View files (9)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 93 All time: 427 This week: 2Up
Version License JavaScript version Categories
on-functions-js 1.0.5MIT/X Consortium ...1.8HTML, 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
JavaScript Programming Innovation award winner
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
Picture of Andras Toth
  Performance   Level  
Name: Andras Toth <contact>
Classes: 22 packages by
Country: Hungary Hungary
Age: 49
All time rank: 31 in Hungary Hungary
Week rank: 1 Up
Innovation award
Innovation award
Nominee: 15x

Winner: 9x

Details

onFunctionsJS

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

  • [Homepage] - Home page, demonstration

<p align="center">

<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/

Screenshots  
  • demo
  Files folder image Files  
File Role Description
Accessible without login Plain text file doc.html Doc. example
Accessible without login Image file icon.png Icon Icon image
Accessible without login HTML file index.html Doc. Documentation
Accessible without login Image file js.png Icon Icon image
Accessible without login Plain text file main.js Test Unit test script
Accessible without login Plain text file MIT-License.txt Doc. Documentation
Plain text file onFunctionsJS.js Class Class source
Accessible without login Plain text file README.md Data Auxiliary data
Accessible without login Plain text file style.css Data Auxiliary data

 Version Control Unique User Downloads Download Rankings  
 80%
Total:93
This week:0
All time:427
This week:2Up