addEventListener() and attachEvent() these two methods (functions) are used to apply event on Html element. It is considered a secure way to apply JS events.
addEventListener() supports 9.0 or higher versions of internet explorer and all modern browsers. To remove the functionality of addEventListener, we use removeEventListener().
addEventListener syntax
addEventListener("event",function,phase);We don't write prefix like on before event names.
Example- addEventListener("click",function(){window.alert();});
But, attachEvent() supports below 9.0 versions of internet explorer. And detachEvent() remove the attachEvent() method from element in which it is applied.
<!DOCTYPE html>
<html>
<head>
<title>addEventListener and attachEvent</title>
</head>
<body>
<button id="btn">Click on me</button>
<script>
var click_btn=document.getElementById("btn");
btn.addEventListener("click",function(){window.alert("Thanks for clicking on me!");});
</script>
</body>
</html>Or
<!DOCTYPE html>
<html>
<head>
<title>addEventListener and attachEvent</title>
</head>
<body>
<button id="btn">Click on me</button>
<script>
var click_btn=document.getElementById("btn");
btn.addEventListener("click",test);
function test()
{
document.write("thanks for clicking on me!");
}
</script>
</body>
</html>addEventListener and removeEventListener Example
<!DOCTYPE html>
<html>
<head>
<title>addEventListener and attachEvent</title>
</head>
<body>
<button id="btn">Button</button>
<button id="rmv-btn">remove event from button</button>
<script>
var click_btn=document.getElementById("btn");
btn.addEventListener("click",test);
function test()
{
window.alert("Thanks for clicking on me!");
}
var rmv_btn=document.getElementById("rmv-btn");
rmv_btn.onclick=function()
{
btn.removeEventListener("click",test);
window.alert("addEventListener method removed.");
}
</script>
</body>
</html>attachEvent syntax
Open Internet Explorer and press F12 to go to Developer tool, then emulation, and after that select document mode lower than 9 because it works only on IE's versions that are below from 9.
attachEvent("Event",function);Do not remove on before event name if you use attachEvent(). For example, Use onclick instead of click.
<!DOCTYPE html>
<html>
<head>
<title>addEventListener and attachEvent</title>
</head>
<body>
<button id="btn">Button</button>
<script>
var click_btn=document.getElementById("btn");
btn.attachEvent("onclick",test);
function test()
{
window.alert("Thanks for clicking on me!");
}
</script>
</body>
</html>attachEvent and detachEvent Example
Use Internet explorer browser (below 9.0 version)
<!DOCTYPE html>
<html>
<head>
<title>addEventListener and attachEvent</title>
</head>
<body>
<button id="btn">Button</button>
<button id="rmv-btn">remove event from button</button>
<script>
var click_btn=document.getElementById("btn");
btn.attachEvent("onclick",test);
function test()
{
window.alert("Thanks for clicking on me!");
}
var rmv_btn=document.getElementById("rmv-btn");
rmv_btn.onclick=function()
{
btn.detachEvent("onclick",test);
window.alert("attachEvent method removed.");
}
</script>
</body>
</html>Cross-browser solution
<!DOCTYPE html>
<html>
<head>
<title>addEventListener and attachEvent</title>
</head>
<body>
<button id="btn">Button</button>
<script>
var click_btn=document.getElementById("btn");
if(click_btn.addEventListener)
{
click_btn.addEventListener("click",test);
}
else{
click_btn.attachEvent("onclick",test);
}
function test()
{
window.alert("Thanks for clicking on me!");
}
</script>
</html>Cross-Browser Solution with removeEventListener and detachEvent
<!DOCTYPE html>
<html>
<head>
<title>addEventListener and attachEvent</title>
</head>
<body>
<button id="btn">Button</button>
<button id="rmv-btn">Remove Event From Button</button>
<script>
var click_btn=document.getElementById("btn");
if(click_btn.addEventListener)
{
click_btn.addEventListener("click",test);
}
else{
click_btn.attachEvent("onclick",test);
}
function test()
{
window.alert("Thanks for clicking on me!");
}
var rmv_btn=document.getElementById("rmv-btn");
rmv_btn.onclick=function()
{
if(click_btn.addEventListener)
{
click_btn.removeEventListener("click",test);
window.alert("addEventListener method removed.");
}
else{
click_btn.detachEvent("onclick",test);
window.alert("attachEvent method removed.");
}
}
</script>
</html>More articles:-
Publish A Comment