javascript : .off(eventName.NameSpace)

 

javascript : .off(eventName)

.off(eventName.NameSpace)

---

Target:

Applicable with any DOM element.

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

---

Description :

It remove eventHandlerFunction with element of eventName. It is the reverse of on() method.
It is the easy way of removeEventListener method.
eventName : name of event that was registered with on() method.
.NameSpace : if event is register with NameSpace then for removing eventHandlerFunction NameSpace is used.

Note: It clears the eventHandlerFunction from element register with on() method.

---

Syntax:

DOMElement.off(eventName)

DOMNodeList.off(eventName)

HTMLCollection.off(eventName)

---

Usase:

1. document.getElementById('firstDiv').off("click")
   It remove click eventHandlerFunction from element having id firstDiv.
2. document.getElementsByTagName('div').off("click")
   it remove click eventHandlerFunction from all divs of document that was previously registred with on() method.
3. document.getElementsByClassName('FirstDiv').off("click")
   it remove click eventHandlerFunction from all elements that have class .FirstDiv of document that was previously registred with on() method.
4. document.getElementsByName('FirstDiv').off("click")
   it remove click eventHandlerFunction from all elements that have name FirstDiv of document that was previously registred with on() method.
5. document.querySelector('.FirstDiv').off("click")
   it remove click eventHandlerFunction from first element that have class .FirstDiv of document that was previously registred with on() method.
6. document.querySelectorAll('.FirstDiv').off("click")
   it remove click eventHandlerFunction from all elements that have class .FirstDiv of document that was previously registred with on() method.

---

For removing eventHandlerFunction that was registered with .NameSpace pass NameSpace with eventName

---

Example 1 :
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"


document.getElementById('firstDiv')
.off('click')
.off('click.Third');
the output in console when firstDiv element will click
"firstDiv Clicked."

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.