Tutorial Lesson 3: Event Listeners

An event listener is something that listens for an event (imagine that!), and when that event occurs, it does something. If my wife asks me to answer her phone while she steps out for a minute, she's basically just made me into an event listener. I wait for the phone to ring; if it does, I answer it.

In the same way, we can create an event listener for our element. Two event listeners every web surfer has seen the effects of are "mouseover" and "mouseout". To make an image-rollover for a web page, the mouseover and mouseout events are tracking your mouse movements over a button and changing the image accordingly.

Simple Event Listener

<script type="text/css" src="lib/jude.js"></script>
<script type="text/css>
    jude.include( "ext.event" ) ;

    jude.onload = function() {
        myButton = E( "<IMG>", 20, 20, 80, 25,
            "images/button_rollover_off.gif" ).appendTo() ;
        myButton.aE( "mouseover", changePicOn ) ;
        myButton.aE( "mouseout", changePicOff ) ;
    };

    function changePicOn() {
        myButton.src = "images/button_rollover_on.gif" ;
    };

    function changePicOff() {
        myButton.src = "images/button_rollover_off.gif" ;
    };
</script>

The aE() method is the focus of this example, beause it's what sets up the event listeners. There are two event listeners specified in this example — one for the "mouseover" event and one for the "mouseout" event. After setting up these event listeners, any time the mouse cursor passes over the image, the "mouseover" event is fired by the browser and the function changePicOn() is called by the event listener. The function in-turn changes the source property of the image. Whenever the mouse passes off of the image, the "mouseout" event is fired and the changePicOff() function is called and the image is changed back again.

Notice that we used the jude.include() method to include another Jude component: the Event extension. The extension is really this file: lib/ext/event.js. We could include this file using another script tag like <script type="text/javascript" src="../lib/ext/event.js"></script>, but, as you can see, Jude provides the include method so we don'th have to. We included the Event extension because it's what gives us the event listener interface; without it, the aE() method would not be defined and we could not create an event listener.

More Complex Event Listeners

If our page has many rollovers, it would not be feasible to write two functions for every button. Using the information about the event provided to us by Jude, we can write one smart function that does it all and point all the event listeners at it.

jude.onload = function() {
    myButton1 = E( "<IMG>", 20, 20, 80, 25,
        "images/button1_rollover_off.gif" ).appendTo() ;
    myButton1.aE( "mouseover", changePic ) ;
    myButton1.aE( "mouseout", changePic ) ;

    myButton2 = E( "<IMG>", 120, 20, 80, 25,
        "images/button2_rollover_off.gif" ).appendTo() ;
    myButton2.aE( "mouseover", changePic ) ;
    myButton2.aE( "mouseout", changePic ) ;
};

function changePic() {
    if( jude.event.type == "mouseover" ) {
        if( jude.event.target == myButton1 )
            myButton1.src = "images/button1_rollover_on.gif" ;
        else if( jude.event.target == myButton2 )
            myButton2.src = "images/button2_rollover_on.gif" ;
    }else{
        if( jude.event.target == myButton1 )
            myButton1.src = "images/button1_rollover_off.gif" ;
        else if( jude.event.target == myButton2 )
            myButton2.src = "images/button2_rollover_off.gif" ;
    }
};

For the sake of encapsulation, we could clean up the changePic function like this:

jude.onload = function() {
    myButton1 = E( "<IMG>", 20, 20, 80, 25,
        "images/button1_rollover_off.gif" ).appendTo() ;
    myButton1.rolloverPicOn  = "images/button1_rollover_on.gif" ;
    myButton1.rolloverPicOff = "images/button1_rollover_off.gif" ;
    myButton1.aE( "mouseover", changePic ) ;
    myButton1.aE( "mouseout", changePic ) ;

    myButton2 = E( "<IMG>", 120, 20, 80, 25,
        "images/button2_rollover_off.gif" ).appendTo() ;
    myButton2.rolloverPicOn  = "images/button2_rollover_on.gif" ;
    myButton2.rolloverPicOff = "images/button2_rollover_off.gif" ;
    myButton2.aE( "mouseover", changePic ) ;
    myButton2.aE( "mouseout", changePic ) ;
};

function changePic() {
    if( jude.event.type == "mouseover" )
        jude.event.target.src = jude.event.target.rolloverPicOn ;
    else
        jude.event.target.src = jude.event.target.rolloverPicOff ;
};

The Event Object

Notice that in the last two examples, we used something called “jude.event.” This special object provides us with everything we should ever want to know about the most recent event. The most commonly-used properties of jude.event are target and type. The target property of jude.event (jude.event.target) returns a reference to the element that first received the event (in our case, one of the buttons). The type property (jude.event.type) returns a string that identifies the event ("mouseover" or "mouseout" in our case).

For a complete reference of jude.event properties, view the Jude documentation for this object.

You're on Your Way!

You now know enough to jump into making some great DHTML applications with Jude! May God bless you in all your JavaScripting! —Tim Morgan