jQuery in Action
The jQuery Event Model
99
Let's put
bind
into action. Taking the example of listing 4.3 and converting it
from the
DOM
Level 2 Model to the jQuery Model, we end up with the code
shown in listing 4.5 and found in the file chapter4/jquery.events.html.
<html>
<head>
<title>DOM Level 2 Events Example</title>
<script type="text/javascript"
src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
$('#vstar')
.bind('click',function(event) {
say('Whee once!');
})
.bind('click',function(event) {
say('Whee twice!');
})
.bind('click',function(event) {
say('Whee three times!');
});
});
function say(text) {
$('#console').append('<div>'+text+'</div>');
}
Command syntax: bind
bind(eventType,data,listener)
Establishes a function as the event handler for the specified event type on all elements in
the matched set.
the matched set.
Parameters
eventType
(String) Specifies the name of the event type for which the handler is to be
established. This event type can be namespaced with a suffix separated
from the event name with a period character. See the remainder of this
established. This event type can be namespaced with a suffix separated
from the event name with a period character. See the remainder of this
section for details.
data
(Object) Caller-supplied data that's attached to the Event instance as a
property named data for availability to the handler functions. If omitted, the
handler function can be specified as the second parameter.
property named data for availability to the handler functions. If omitted, the
handler function can be specified as the second parameter.
listener
(Function) The function that's to be established as the event handler.
Returns
The wrapped set.
The wrapped set.
Listing 4.5 Establishing event handlers without the need for browser-specific code
Binds three event
handlers to the image
handlers to the image
b