JavaScript Framework Hover Event handling

Each JavaScript framework implements Cross-browser event handling, encouraging you to get rid of legacy inline-attached events and use streamlined linear methods. Look at the jquery example in Listing 6, using the hover event to highlight the DIV element.

Listing 6: Attaching hover events with jquery

$ (' #the-box '). Hover (function () {
$ (this). addclass (' highlight ');
}, function () {
$ (this). Removeclass (' highlight ');
});

This is a special event for jquery, and you'll find that it provides two functions. The first is invoked when the onmouseover event is triggered, and the second function is invoked when the onmouseout event is triggered. This is because hover does not have a standard DOM event. Let's look at more typical events, such as Click (see Listing 7):

Listing 7: Attaching the Click event with jquery

$ (' #the-button '). Click (function () {
Alert (' You pushed the button! ');
});

As you can see, there is only one function parameter in the instance. Most of the events in jquery are handled in the same way, using an event handler in jquery, which refers to which object triggers the event. Some frameworks don't work this way, and for prototype, the code in Listing 7 looks like that in Listing 8.

Listing 8: Attaching the Click event with prototype

$ (' The-button '). Observe (' click ', Function (e) {
Alert (' You pushed the button! ');
});

You will first notice that there is no click function, but a observe function that accepts an event argument before referencing itself. You will also notice that the function accepts an argument e, where the context refers to the element that triggers the event. To see how it works, let's rewrite the code in Listing 6 with prototype (see Listing 9).

Listing 9: Attaching a hover event 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 variable, the prototype library uses the Event.element () function. In addition, you notice that you need to separate the mouseover from the Mouseout event.

Through some of the tutorials in this article, you can see that functions are created inline, not named. This means that it cannot be reused, and the prototype hover example gives us an opportunity to use named functions. Listing 10 illustrates this approach.

Listing 10: Using prototype to improve hover events

You'll notice that at this point you just need to define a function. It is also invoked by MouseOver and Mouseout events. The function is added or deleted based on the result, depending on whether the element has a "highlight" class name. You will also notice that the parameter e is implicitly transitive. In other words, you pass 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);