whose event listeners are currently being invoked
Description
currentTarget
returns the element whose event listeners are currently being invoked.
Its return type is HTMLElement.
Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from w w w. j a va 2s.c o m-->
background: gray;
color: white;
padding: 10px;
margin: 5px;
border: thin solid black
}
span {
background: white;
color: black;
padding: 2px;
cursor: default;
}
</style>
</head>
<body>
<p id="block1">
<span id="mySpan">This is a span. </span>
</p>
<script type="text/javascript">
var mySpan = document.getElementById("mySpan");
var textblock = document.getElementById("block1");
mySpan.addEventListener("mouseover", handleMouseEvent);
mySpan.addEventListener("mouseout", handleMouseEvent);
textblock.addEventListener("mouseover", handleDescendantEvent, true);
textblock.addEventListener("mouseout", handleDescendantEvent, true);
function handleDescendantEvent(e) {
if (e.type == "mouseover" &&
e.eventPhase == Event.CAPTURING_PHASE) {
e.target.style.border = "thin solid red";
e.currentTarget.style.border = "thick double black";
} else if (e.type ==
"mouseout" && e.eventPhase == Event.CAPTURING_PHASE) {
e.target.style.removeProperty("border");
e.currentTarget.style.removeProperty("border");
}
}
function handleMouseEvent(e) {
if (e.type == "mouseover") {
e.target.style.background = 'white';
e.target.style.color = 'black';
} else {
e.target.style.removeProperty('color');
e.target.style.removeProperty('background');
}
}
</script>
</body>