jQuery in Action
Understanding the browser event models
85
The
W3C
didn't create a standardized model for event handling until
DOM
Level 2, introduced in November 2000. This model enjoys support from all mod-
ern standards-compliant browsers such as Firefox, Camino (as well as other
Mozilla browsers), Safari, and Opera. Internet Explorer continues to go its own
way and supports a subset of the
ern standards-compliant browsers such as Firefox, Camino (as well as other
Mozilla browsers), Safari, and Opera. Internet Explorer continues to go its own
way and supports a subset of the
DOM
Level 2 Event Model functionality, albeit
using a proprietary interface.
Before we see how jQuery makes that irritating fact a non-issue, let's spend
time getting to know how the event models operate.
4.1.1 The DOM Level 0 Event Model
The
DOM
Level 0 Event Model is probably the event model that most web devel-
opers employ on their pages. In addition to being somewhat browser-indepen-
dent, it's fairly easy to use.
dent, it's fairly easy to use.
Under this event model, event handlers are declared by assigning a reference
to a function instance to properties of the
DOM
elements. These properties are
defined to handle a specific event type; for example, a click event is handled by
assigning a function to the
assigning a function to the
onclick
property, and a mouseover event by assigning
a function to the
onmouseover
property of elements that support these event types.
The browsers allow us to specify the body of an event handler function as
attribute values in the
DOM
elements'
HTML
, providing a shorthand for creating
event handlers. An example of defining such handlers is shown in listing 4.1.
This page can be found in the downloadable code for this book in the file
chapter4/dom.0.events.html.
This page can be found in the downloadable code for this book in the file
chapter4/dom.0.events.html.
<html>
<head>
<title>DOM Level 0 Events Example</title>
<script type="text/javascript"
src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
$('#vstar')[0].onmouseover = function(event) {
say('Whee!');
}
});
function say(text) {
$('#console').append('<div>'+new Date()+' '+text+'</div>');
}
</script>
</head>
Listing 4.1 Declaring DOM Level 0 event handlers
Ready handler defines
mouseover handler
mouseover handler
b
Utility function emits
text to console
text to console
c