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>
The code above generates the following result.
Javascript Tutorial Event Basic
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 JavaScript
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 JavaScriptCheck 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 JavaScript
Stop Event Propagation in JavaScript
Tell if the event supports bubble with Even...
Test the event bubbling in JavaScript