Comparison of JavaScript frameworks-event processing (V)

Event Processing

Each JavaScript framework implements cross-browser event processing, and encourages you to use a streamlined linear method instead of the old inline appending event. Take a look at the jQuery example in Listing 6 and use the hover event to highlight the div element.

Listing 6: attaching a hover event with jQuery

$ ('# The-box'). hover (function (){

$ (This). addClass ('highlight ');

}, Function (){

$ (This). removeClass ('highlight ');

});
This is a special event of jQuery. You will find that it provides two functions. The first function is called when the onMouseOver event is triggered, and the second function is called when the onMouseOut event is triggered. This is because hover does not have standard DOM events. Let's take a look at more typical events, such as click (see listing 7 ):

Listing 7: appending a click event with jQuery

$ ('# The-button'). click (function (){

Alert (You pushed the button! ');

});
As you can see, the instance has only one function parameter. In jQuery, most events are processed in the same way. In jQuery, the context refers to the object that triggers the event. Some frameworks do not work in this way. For Prototype, the code in listing 7 looks like the code in listing 8.

Listing 8: appending a click event with Prototype

$ (The-button). observe ('click', function (e ){

Alert (You pushed the button! ');

});
First, you will notice that there is no click function, but an observe function, which accepts an event parameter before referencing itself. You will also notice that this function accepts a parameter e. The context here refers to the element that triggers the event. Let's see how it works. Let's use Prototype to rewrite the code in Listing 6 (see listing 9 ).

Listing 9: appending a hover event with 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 and mouseout events.

Through some tutorials in this article, you can see that the function is created in an internal join mode, but it is not named. This means that it cannot be used repeatedly. The Prototype hover example also gives us a chance to use the namefunction. Listing 10 illustrates this method.

Listing 10: using Prototype to improve hover events

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 );
You will notice that you only need to define a function. It is called by both the mouseover and mouseout events. This function adds or deletes an element based on its "highlight" class name. You will also notice that the parameter e is passed implicitly. In other words, you pass an ambiguous parameter to the observe function.

Reprint address: http://www.denisdeng.com /? P = 720

Address: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html