addeventlistener and removeeventlistener in JavaScript
Link for all dot net and sql server video tutorial playlists
/ kudvenkat
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
/ @aarvikitchen5572
In this video we will discuss assigning event handlers in JavaScript using the following special methods
addEventListener
removeEventListener
attachEvent
detachEvent
Internet Explorer 9 (and later versions) & all the other modern browsers support addEventListener() and removeEventListener() methods.
Sytnax for assigning event handler using addEventListener() method
element.addEventListener(event, handler, phase)
Sytnax for removing event handler using removeEventListener() method
element.removeEventListener(event, handler, phase)
Please note : The third parameter phase is usually set to false as it is not used.
Example : In this example, we are passing values for all the 3 parameters including phase.
[input type="button" value="Click me" id="btn"/]
[script type="text/javascript"]
btn.addEventListener("mouseover", changeColorOnMouseOver, false);
btn.addEventListener("mouseout", changeColorOnMouseOut, false);
function changeColorOnMouseOver()
{
this.style.background = 'red';
this.style.color = 'yellow';
}
function changeColorOnMouseOut()
{
this.style.background = 'black';
this.style.color = 'white';
}
[/script]
Since the third parameter "phase" is optional you can omit it if you wish.
btn.addEventListener("mouseover", changeColorOnMouseOver);
btn.addEventListener("mouseout", changeColorOnMouseOut);
Example : This example demonstrates removing event handlers.
[input type="button" value="Click me" id="btn"/]
[input type="button" value="Remove Event Handlers" onclick="removeEventHandlers()" /]
[script type="text/javascript"]
btn.addEventListener("mouseover", changeColorOnMouseOver);
btn.addEventListener("mouseout", changeColorOnMouseOut);
function changeColorOnMouseOver()
{
this.style.background = 'red';
this.style.color = 'yellow';
}
function changeColorOnMouseOut()
{
this.style.background = 'black';
this.style.color = 'white';
}
function removeEventHandlers()
{
btn.removeEventListener("mouseover", changeColorOnMouseOver);
btn.removeEventListener("mouseout", changeColorOnMouseOut);
}
[/script]
Using this approach you can assign more than one event handler method to a given event. The order in which handler methods are executed is not defined. In this example, 2 event handler methods (clickHandler1 & clickHandler3) are assigned to click event of the button control. When you click the button both the handler methods are executed.
[input type="button" value="Click me" id="btn"/]
[script type="text/javascript"]
btn.addEventListener("click", clickHandler1);
btn.addEventListener("click", clickHandler2);
function clickHandler1()
{
alert("Handler 1");
}
function clickHandler2()
{
alert("Handler 2");
}
[/script]
attachEvent() and detachEvent() methods only work in Internet Explorer 8 and earlier versions.
Sytnax for assigning event handler using attachEvent() method
element.attachEvent( "on"+event, handler)
Sytnax for removing event handler using detachEvent() method
element.detachEvent( "on"+event, handler)
Example : This example will only work in Internet Explorer 8 and earlier versions.
[input type="button" value="Click me" id="btn"/]
[script type="text/javascript"]
btn.attachEvent("onclick", clickEventHandler);
function clickEventHandler()
{
alert("Click Handler");
}
[/script]
Cross browser solution : For the above example to work in all browsers, modify the script as shown below.
[input type="button" value="Click me" id="btn"/]
[script type="text/javascript"]
if (btn.addEventListener)
{
btn.addEventListener("click", clickEventHandler);
}
else
{
btn.attachEvent("onclick", clickEventHandler);
}
function clickEventHandler()
{
alert("Click Handler");
}
[/script]
Watch video addeventlistener and removeeventlistener in JavaScript online without registration, duration hours minute second in high quality. This video was added by user kudvenkat 14 January 2015, don't forget to share it with your friends and acquaintances, it has been viewed on our site 60,473 once and liked it 262 people.