Every JavaScript framework implements cross-browser event handling, encouraging you to move away from the old-style inline appending of events and use a streamlined linear approach. Take a look at the jQuery example in Listing 6 that uses the hover event to highlight a div element.
Listing 6: Attaching the hover event using jQuery
$('#the-box').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
This is a special event of jQuery, and you will find that it provides two functions. The first one is called when the onMouseOver event fires, and the second function is called when the onMouseOut event fires. This is because there is no standard DOM event for hover. Let's look at a more typical event like click (check out Listing 7):
Listing 7: Attaching click events using jQuery
$('#the-button').click(function() {
alert('You pushed the button!');
});
As you can see, there is only one function parameter in the instance. Most events in jQuery are handled the same way, using event handlers in jQuery, the context refers to which object triggered the event. Some frameworks don't work this way. In the case of Prototype, the code in Listing 7 looks just like Listing 8.
Listing 8: Attaching click events using Prototype
$('the-button').observe('click', function(e) {
alert('You pushed the button!');
});
The first thing you'll notice is that there is no click function, but an observe function that accepts an event parameter before referencing itself. You'll also notice that the function accepts a parameter e, where the context refers to the element that triggered the event. To see how it works, let's rewrite the code in Listing 6 using Prototype (see Listing 9).
Listing 9: Attaching hover events using Prototype
$('the-box').observe('mouseover', function(e) {
var el = Event.element(e);
el.addClassName('highlight');
});
$('the-box').observe('mouseout', function(e) {
var el = Event.element(e);
el.removeClassName('highlight');
});
jQuery is also different, you only need to use the $ function to get the context variables, while the Prototype library uses the Event.element() function. Additionally, you noticed that you need to separate the mouseover and mouseout events.
Through some of the tutorials in this article, you can see that functions are created inline and not named. This means it cannot be reused, and Prototype's hover example also gives us an opportunity to see how to use named functions. Listing 10 illustrates this method.
Listing 10: Improving hover events using Prototype
You'll notice that at this point you only need to define one function. It is called by both mouseover and mouseout events. This function determines whether an element has a "highlight" class name, and adds or removes it based on the result. You'll also notice that parameter e is passed implicitly. In other words, you passed an ambiguous argument to the observe function.
Reprint address: http://www.denisdeng.com/?p=720
Original address: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html
function toggleClass(e) {
var el = Event.element(e);
if(el.hasClassName('highlight'))
row.removeClassName('highlight');
else
row.addClassName('highlight');
}
$('the-box').observe('mouseover', toggleClass);
$('the-box').observe('mouseout', toggleClass);