Add Event Listener Remove It and Add It Again
JavaScript is highly used in web page development. Being a dynamic language, it's piece of cake to change the behaviors of the folio on Runtime. It is unremarkably easier to utilize in the client-side environment every bit nosotros are able to make changes very quickly. Today we are going to talk about another JavaScript performance which is how we tin can easily remove the consequence listener from an event.
Removing the event listener using JavaScript
Removing the event listener from a specific HTML element can be so important in some cases as you lot don't desire the event to get triggered multiple times without any reason. JavaScript can exist very helpful to achieve this functionality so allow's see how nosotros can easily get this job washed.
RemoveEventListener() method
RemoveEventListener() is a congenital-in function in JavaScript that can be used to remove event listeners from HTML elements.Presume you have the post-obit event listener attached to a <button> element:
<body style = "text-align:eye;" >
<heart>
<button id= "click" >Click me</button>
</center>
<script>
allow btn = document.getElementById ( 'click' ) ;
const clicked = (e) => {
alert( 'this button was clicked' ) ;
}
btn.addEventListener ( 'click' , clicked)
</script>
</body
Now suppose you desire to remove the click result from the button, yous'll need a reference to both the chemical element containing the listener and the callback part reference to remove an result listener effectively. To remove the "click" issue, the lawmaking will go like this:
btn.removeEventListener ( 'click' , clicked)
Yet, it's non a skillful idea to pass an event listener an unnamed callback function like this:
btn.addEventListener ( 'click' , (due east) => {
warning( 'this push button was clicked' ) ;
} )
You won't exist able to remove the issue listener without the callback function name, as seen in the example above.
Removing the upshot listener later on clicking the button
Sometimes you may don't desire the push to be clicked twice as if its going to exist clicked, the effect volition trigger and cause the processing issues under the event. Then to handle this issue instantly we need to attach a removeEventListener() inside the addEvenetListener() method. Allow's encounter how we tin achieve this functionality in the lawmaking beneath:
<body style = "text-align:center;" >
<center>
<button id= "click" >Click me</button>
</centre>
<script>
allow btn = certificate.getElementById ( 'click' ) ;
const clicked = (e) => {
alert( 'this push button was clicked' ) ;
btn.disabled = true ; // this line is disabling the button
btn.removeEventListener ( 'click' , clicked) // this line removes the event listener right after clicking the push button
}
btn.addEventListener ( 'click' , clicked)
</script>
</body>
Output:
And so with the higher up instance, once the push button was clicked, it'south going to trigger the event attached to it and remove that upshot later disabling the button to avoid multiple clicks at the same fourth dimension from the user.
That's how you become rid of JavaScript event listeners from HTML elements. For removing an event listener from an HTML element, you need to accept care of the 2 things, you accept to define the type of the event and the second thing is that you need to provide the reference office that is attached to the consequence listener.
Decision
The removeEventListener() method is used whenever you are required to remove the issue from a particular HTML element. This method requires two arguments,the kickoff argument will be the event name while the second statement will be the part that is attached to the issue listener. In this article, we take seen the case where we have discussed how nosotros tin can just remove an event fastened to an HTML element.
Nearly the author
A Javascript Developer & Linux enthusiast with 4 years of industrial feel and proven know-how to combine artistic and usability viewpoints resulting in earth-class web applications. I have feel working with Vue, React & Node.js & currently working on article writing and video cosmos.
Source: https://linuxhint.com/remove-event-listener-javascript/
0 Response to "Add Event Listener Remove It and Add It Again"
Post a Comment