Handling events with the DOM – Part I - Inline and scripted event handlers into action
(Page 4 of 4 )
Indeed, inline event handlers have been in use for a long time. As applications became more complex, a clear need developed to implement HTML and JavaScript code in different layers. Although basic, it’s quite useful to demonstrate how event phases are handled with inline event handlers. Here’s is a sample of this:
<div id="testdiv" onclick="alert('Reacting to Event bubble phase');">
<p><a href="#">Click here activate the alert method</a></p>
</div>
In the previous example, we’ve attached the "onclick" event handler to the <div> element, instead of assigning it directly to the link. However, if we’re using a browser that supports event bubble, by just clicking on the <a> element, the event will traverse the paragraph, reaching the <div> element and firing up the "alert" box. However, since messing up HTML with JavaScript is not recommended, the sample might be rewritten as follows:
<script language="javascript">
var div=document.getElementById('testdiv');
div.onclick=function(){
alert('Reacting to Event bubble phase');
}
</script>
And the HTML would be reduced to this:
<div id="testdiv">
<p><a href="#">Click here activate the alert method</a></p>
</div>
For both cases, the result is the same, but the last one is definitely the way to go, since we removed the inline event handler from the HTML.
At this point, we’ve playing around with some core definitions, explaining different techniques for assigning event handling that have been in use for a long time, hopefully as a reminder for choosing the right method when we’re dealing with event handlers nowadays.
In the browser arena, not so surprisingly, Nestcape and Microsoft came up with different conclusions for event handling. Netscape’s approach was originally based in the capture phase, establishing that any event should be handled when the event was traversing the Web document, going through all of the containing elements, until reaching the target.
On the other hand, Microsoft branched to the event bubble direction, specifying that events should take precedence at the bubble phase. As we can see, the two models are radically opposed. Netscape 4 only supports event capturing, while Internet Explorer only supports event bubbling. Mozilla, Opera 7 and Konqueror support both approaches. Older versions of Opera and iCab support neither. We’ll see more event handling browser implementations in more detail shortly. As an introductory process, it’s more than enough.
Summary So far, we’ve taken a deeper look at some basic concepts such as assigning event handling, as well as explaining the DOM event flow model and its corresponding phases for Event Capture and Event Bubble. Specifically, in order to take advantage of its abilities and give more event control to Web developers, there are several available methods that offer a new alternative for assigning and manipulating event handlers. In the second part of these series, we’ll be discussing the"attachEvent()" and "addEventListener()"methods, and their different implementations on today’s major browsers. See you soon!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 11 
