Remove a certain type of event listener from an element in JavaScript
Description
The following code shows how to remove a certain type of event listener from an element.
Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from ww w. j a va2s . c om-->
background: gray;
color: white;
padding: 10px;
margin: 5px;
border: thin solid black
}
</style>
</head>
<body>
<p>This is a test.</p>
<p id="block2">This is a test.</p>
<button id="pressme">Press Me</button>
<script type="text/javascript">
var pElems = document.getElementsByTagName("p");
for ( var i = 0; i < pElems.length; i++) {
pElems[i].addEventListener("mouseover", handleMouseOver);
pElems[i].addEventListener("mouseout", handleMouseOut);
}
document.getElementById("pressme").onclick = function() {
document.getElementById("block2").removeEventListener("mouseout",handleMouseOut);
}
function handleMouseOver(e) {
e.target.innerHTML += "mouseover";
e.target.style.background = 'red';
e.target.style.color = 'black';
}
function handleMouseOut(e) {
e.target.innerHTML += "mouseout";
e.target.style.removeProperty('color');
e.target.style.removeProperty('background');
}
</script>
</body>
</html>
The code above generates the following result.
Javascript Tutorial Event Basic
Add click event handler to form and check t...
Check Event bubble phase in JavaScript
Check event type in JavaScript
Create your own event in JavaScript
Demonstrate Event Bubbling in JavaScript
Demonstrate Event Capture and Bubble and ev...
Find out event handling and firing phases i...
Get element id through event object in Java...
Get event Phase in JavaScript
Get event source element name and id in Jav...
Get the event target in JavaScript
Get the event type for key event in JavaScr...
Get the event type from event in JavaScript
Get the source tag name which triggered the...
Prevent event Bubble and Capture in JavaScr...
Stop Event Propagation in JavaScript
Tell if the event supports bubble with Even...
Test the event bubbling in JavaScript
Add click event handler to form and check t...
Check Event bubble phase in JavaScript
Check event type in JavaScript
Create your own event in JavaScript
Demonstrate Event Bubbling in JavaScript
Demonstrate Event Capture and Bubble and ev...
Find out event handling and firing phases i...
Get element id through event object in Java...
Get event Phase in JavaScript
Get event source element name and id in Jav...
Get the event target in JavaScript
Get the event type for key event in JavaScr...
Get the event type from event in JavaScript
Get the source tag name which triggered the...
Prevent event Bubble and Capture in JavaScr...
Remove a certain type of event listener fro...
Show the event capture phase in JavaScriptStop Event Propagation in JavaScript
Tell if the event supports bubble with Even...
Test the event bubbling in JavaScript