javascript : .one(eventName,eventHandlerFunction)

---

Target:

Applicable with any DOM element.

• getElementById
• getElementsByTagName
• getElementsByClassName
• getElementsByName
• querySelector
• querySelectorAll

---

Description :

It register eventHandlerFunction only for one time execution with element on triggering of eventName. After executing eventHandlerFunction it automatically removed.
eventName : name of event that trigger the event handler function.
eventHandlerFunction : function that register with event and executes when event fired.

The [this] refer to the object with that eventName is register within the eventHandlerFunction.
The [e] argument of eventHandlerFunction received the event object of event.

Note: It register only one eventHandlerFunction with one event with one element.

---

Syntax:

DOMElement.one(eventName, eventHandlerFunction)

DOMNodeList.one(eventName, eventHandlerFunction)

HTMLCollection.one(eventName, eventHandlerFunction)

---

Usase:

1. document.getElementById('firstDiv').one("click", function(e){ console.log(this.tagName); })
   It register function with the firstDiv element on click event.
   When firstDiv clicked then the function executes and log in console firstDiv tagName "DIV"
   After that the eventHandlerFunction removed and second time click will give no result.
2. document.getElementsByTagName('div').one("click", function(e){ console.log(this.tagName); })
   It register function with the all the div element's on click event.
   When any div is clicked then the function executes and log in console tagName "DIV"
   After that the eventHandlerFunction removed and second time click will give no result.
3. document.getElementsByClassName('FirstDiv').one("click", function(e){ console.log(this.tagName); })
   It register function with the all the elements having class of .FirstDiv on click event.
   When any element is clicked then the function executes and log in console tagName as "DIV"
   After that the eventHandlerFunction removed and second time click will give no result.
4. document.getElementsByName('FirstDiv').one("click", function(e){ console.log(this.tagName); })
   It register function with the all the elements having name attribute of FirstDiv on click event.
   When any element is clicked then the function executes and log in console tagName as "DIV"
   After that the eventHandlerFunction removed and second time click will give no result.
5. document.querySelector('.FirstDiv').one("click", function(e){ console.log(this.tagName); })
   The querySelector selects first div having class "FirstDiv" and on() method register function with the element on click event.
   When element is clicked then the function executes and log in console tagName as "DIV"
   After that the eventHandlerFunction removed and second time click will give no result.
6. document.querySelectorAll('.FirstDiv').one("click", function(e){ console.log(this.tagName); })
   The querySelectorAll selects all div having class "FirstDiv" and on() method register function with all the elements on click event.
   When element is clicked then the function executes and log in console tagName as "DIV"
   After that the eventHandlerFunction removed and second time click will give no result.

Download MYJS.js

MyJs is a collection of java script extension methods that enhances the JavaScript objects, class object, DOM element, domElementsCollections, Date, String, Number and other data type. 

Include in you project landing page (master page) and it will extends your DOM and JavaScript Objects.