What is the event handling and firing phases in Javascript
Description
The eventPhase property will return one of the three values shown in the following table.
| Name | Description |
|---|---|
CAPTURING_PHASE | The event is in the capture phase. |
AT_TARGET | The event is in the target phase. |
BUBBLING_PHASE | The event is in the bubble phase. |
Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
<!--from w ww . j a va2 s .c om-->
span {
background: white;
color: black;
padding: 2px;
cursor: default;
}
</style>
</head>
<body>
<p id="block1">
<span id="mySpan">This is a span. java2s.com</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 = "thick 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");
}
e.stopPropagation();
}
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>
</html>