javascript : .on(eventName,eventHandlerFunction)

.on(eventName.NameSpace,eventHandlerFunction)

---

Target:

Applicable with any DOM element.

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

---

Description :

It register eventHandlerFunction with element on triggering of eventName .
It is the easy way to use of addEventListener method.

eventName : name of event that trigger the event handler function.
.NameSpace : optional for registring more than one eventHandlerFunction with an event .
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.
If you want to register more than one eventHandlerFunction function then you can use .NameSpace with eventName.

---

Syntax:

DOMElement.on(eventName, eventHandlerFunction)

DOMNodeList.on(eventName, eventHandlerFunction)

HTMLCollection.on(eventName, eventHandlerFunction)

---

Usase:

1. document.getElementById('firstDiv').on("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"
   [e] is the event object that received as parameter in eventHandlerFunction
2. document.getElementsByTagName('div').on("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"
   [e] is the event object that received as parameter in eventHandlerFunction
3. document.getElementsByClassName('FirstDiv').on("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"
   [e] is the event object that received as parameter in eventHandlerFunction
4. document.getElementsByName('FirstDiv').on("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"
   [e] is the event object that received as parameter in eventHandlerFunction
5. document.querySelector('.FirstDiv').on("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"
   [e] is the event object that received as parameter in eventHandlerFunction
6. document.querySelectorAll('.FirstDiv').on("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"
   [e] is the event object that received as parameter in eventHandlerFunction

---

For register more than one eventHandlerFunction use .NameSpace with eventName

---

Example 1 :
document.getElementById('firstDiv')
.on('click',function(e){ console.log(this.tagName); })
.on('click',function(e){ console.log("firstDiv Clicked."); }); the output in console when firstDiv element will click
"firstDiv Clicked."


Example 2 :
document.getElementById('firstDiv')
.on('click',function(e){ console.log(this.tagName); })
.on('click.SecondFn',function(e){ console.log("firstDiv Clicked."); })
.on('click.Third',function(e){ console.log(e.target.id); }); the output in console when firstDiv element will click
"DIV"
"firstDiv Clicked."
"firstDiv"

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.