Next »
614/1956
« Previous

Check Event bubble phase in JavaScript

Description

The following code shows how to check Event bubble phase.

Example


<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
span {<!-- w w w.  j  a v  a  2s. c  o  m-->
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);
textblock.addEventListener("mouseover", handleBubbleMouseEvent, false);
textblock.addEventListener("mouseout", handleBubbleMouseEvent, false);
function handleBubbleMouseEvent(e) {
if (e.type == "mouseover" && e.eventPhase == Event.BUBBLING_PHASE) {
e.target.style.textTransform = "uppercase";
} else if (e.type == "mouseout" && e.eventPhase == Event.BUBBLING_PHASE) {
e.target.style.textTransform = "none";
}
}
function handleDescendantEvent(e) {
if (e.type == "mouseover" &&
e.eventPhase == Event.CAPTURING_PHASE) {
e.target.style.border = "thn solid red";
e.currentTarget.style.background = "blue";
} 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 = 'black';
e.target.style.color = 'white';
} else {
e.target.style.removeProperty('color');
e.target.style.removeProperty('background');
}
}
</script>
</body>
</html>

Click to view the demo

The code above generates the following result.

Check Event bubble phase in JavaScript
Next »
« Previous