Add click event handler to form and check the event phase in JavaScript

Description

The following code shows how to add click event handler to form and check the event phase.

Example


<html>
<head>
<script type="text/javascript">
function init() {<!--from   w  w  w.j a v a  2s.  c o m-->
document.forms[0].addEventListener("click", formBubbleEvent, false);
}
function formBubbleEvent(evt) {
document.writeln("FORM only on BUBBLE.");
}
function getPhase(evt) {
switch (evt.eventPhase) {
case 1:
return "CAPTURING";
break;
case 2:
return "AT TARGET";
break;
case 3:
return "BUBBLING";
break;
default:
return "";
}
}
</script>
</head>
<body onload="init()">
<form>
<input type="button" value="Button 'main1'" name="main1" onclick="alert('button (' + getPhase(event) + ').')" />
</form>
</body>
</html>

Click to view the demo

The code above generates the following result.

Add click event handler to form and check the event phase in JavaScript