Jump to content

Event Phases


chibineku

Recommended Posts

I have copied out the Event Model Lab from the JavaScript Bible, which lets you add and remove bubble and capture event listeners to different elements in a document. It's dead simple, and I'll copy it out below. The scripts return the phase of the event as it meets each surrounding element. The clickable element is a SPAN inside a P and the BODY has an id as well. I added an option to add an event listener to the SPAN, because originally you could only add listeners to the P and the BODY. Here's the script:

<html>	  <head>			<title>W3C Event Model Lab</title>			<style type="text/css">			td {text-align: center;}			</style>			<script type="text/javascript">			//add event listeners			function addBubbleListener(elemID) {					 document.getElementById(elemID).addEventListener("click",reportEvent,false);			}			function addCaptureListener(elemID) {					 document.getElementById(elemID).addEventListener("click",reportEvent,true);			}			//remove event listeners			function removeBubbleListener(elemID) {					 document.getElementById(elemID).removeEventListener("click",reportEvent,false);			}			function removeCaptureListener(elemID) {					 document.getElementById(elemID).removeEventListener("click",reportEvent,true);			}			//display details about any event heard			function reportEvent(evt) {					 var elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target;					 if (elem.id == "mySpan") {						var msg = "Event processed at " + evt.currentTarget.tagName + " element (event phase = " + evt.eventPhase + " ).\n";						document.controls.output.value += msg;					 }			}			//clear the details textarea			function clearTextArea() {					 document.controls.output.value = "";			}			</script>	  </head>	  <body id="myBody">			<h1>W3C Event Model Lab</h1>			<hr />			<p id="myP"><span id="mySpan">This paragraph (a SPAN element nested inside a			P element) is set to listen for "click" events.</span><p>			<hr />			<form name="controls" id="controls">				  <p>Examine click event characteristics: <input type="button" value="Clear" onclick="clearTextArea()"  />				  <br />				  <textarea name="output" cols="80" rows="6" wrap="virtual">				  </textarea></p>			<table cellpadding="5" border="1">				   <caption style="font-weight:bold">Control Panel</caption>				   <tr style="background-color:#ff9">					   <td rowspan="3">"Bubble" -type click listener</td>					   <td><input type="button" value="Add to BODY" onclick="addBubbleListener('myBody')" /></td>					   <td><input type="button" value="Remove from BODY" onclick="removeBubbleListener('myBody')" /></td>				   </tr>				   <tr style="background-color:#ff9">					   <td><input type="button" value="Add to P" onclick="addBubbleListener('myP')" /></td>					   <td><input type="button" value="Remove from P" onclick="removeBubbleListener('myP')" /></td>				   </tr>				   <tr style="background-color:#ff9">				   <td><input type="button" value="Add to SPAN" onclick="addBubbleListener('mySpan')" /></td>					   <td><input type="button" value="Remove from SPAN" onclick="removeBubbleListener('mySpan')" /></td>				   </tr>				   <tr style="background-color:#f99">					   <td rowspan="3">"Capture" -type click listener</td>					   <td><input type="button" value="Add to BODY" onclick="addCaptureListener('myBody')" /></td>					   <td><input type="button" value="Remove from BODY" onclick="removeCaptureListener('myBody')" /></td>				   </tr>				   <tr style="background-color:#f99">					   <td><input type="button" value="Add to P" onclick="addCaptureListener('myP')" /></td>					   <td><input type="button" value="Remove from P" onclick="removeCaptureListener('myP')" /></td>				   </tr>				   <tr style="background-color:#f99">					   <td><input type="button" value="Add to SPAN" onclick="addBubbleListener('mySpan')" /></td>					   <td><input type="button" value="Remove from SPAN" onclick="removeBubbleListener('mySpan')" /></td>				   </tr>			</table>	  </form></body></html>

With all the listeners on, this is the output:

Event processed at BODY element (event phase = 1 ).Event processed at P element (event phase = 1 ).Event processed at SPAN element (event phase = 2 ).Event processed at P element (event phase = 3 ).Event processed at BODY element (event phase = 3 ).
I gather that phase 1 means that the event listener is responding to the capture event, then 2 means this is the focus of the event, and 3 is bubbling. I can't seem to find a complete reference to these phases and exact definitions. Is this it, or is there more to it? It took me a while to get my head around event phases, but I find it fascinating.
Link to comment
Share on other sites

There's basically just the capture and bubbling phaseIf your event is fired during the capture phase, no events of descendent elements will fire. However, if you capture an event in the bubbling phase, the event of the element that is furthest down in the DOM tree will be the one that is fired.

Link to comment
Share on other sites

Won't the event trigger all listeners on the way in and out, unless you specifically terminate propagation? It must, otherwise this example would produce only one line of output and not the five quoted.

Link to comment
Share on other sites

Well, actually, that's correct. I was wrong, I usually don't deal with capturing and bubbling, because Internet Explorer only uses bubbling, and so do most old browsers.In the capture phase, the higher DOM level events will fire before the lower DOM level events.In the bubbling phase, the lower DOM level events will fire before the higher ones.That "phase 2" is because both capturing and bubbling would get to the lowest level element at the same time.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...