Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Registering Event Handlers - JavaScript(Js)

Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - JavaScript: Events

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Registering Event Handlers - JavaScript(Js)

Functions that handle events are called event handlers. Assigning an event handler to an event on a DOM node is called registering an event handler.

Registering Event Handlers

 

Functions that handle events are called event handlers. Assigning an event handler to an event on a DOM node is called registering an event handler. Previously, we have regis-tered event handlers using the inline model, treating events as attributes of XHTML ele-ments (e.g., <p onclick = "myfunction()">). Another model, known as the traditional model, for registering event handlers is demonstrated alongside the inline model in Fig. 13.1.

In the earliest event-capable browsers, the inline model was the only way to handle events. Later, Netscape developed the traditional model and Internet Explorer adopted it. Since then, both Netscape and Microsoft have developed separate (incompatible)

        <?xml version = "1.0" encoding = "utf-8"?>

 

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

       <!-- Fig. 13.1: registering.html -->

 

      <!-- Event registration models. -->

 

      <html xmlns = "http://www.w3.org/1999/xhtml">

 

      <head>

 

      <title>Event Registration Models</title>

 

        <style type = "text/css">

 

div { padding: 5px;

margin: 10px;

border: 3px solid #0000BB;

width: 12em }

        </style>

 

        <script type = "text/javascript">

        <!--

 

        // handle the onclick event regardless of how it was registered

 

        function handleEvent()

        {

        alert( "The event was successfully handled." );

 

        } // end function handleEvent

 

        // register the handler using the traditional model

 

        function registerHandler()

        {

                  var traditional = document.getElementById( "traditional" );

 

        traditional.onclick = handleEvent;

 

        } // end function registerHandler

        // -->

 

        </script>

 

        </head>

 

        <body onload = "registerHandler()">

 

        <!-- The event handler is registered inline -->

 

        <div id = "inline" onclick = "handleEvent()">

 

        Inline registration model</div>

 

        <!-- The event handler is registered by function registerHandler -->

 

        <div id = "traditional">Traditional registration model</div>

 

        </body>

 

        </html>

 

a) The user clicks the div for which the event handler was registered using the inline model.



Fig. 13.1 | Event registration models.

advanced event models with more functionality than either the inline or the traditional model. Netscape’s advanced model was adapted by the W3C to create a DOM Events Specification. Most browsers support the W3C model, but Internet Explorer 7 does not. This means that to create cross-browser websites, we are mostly limited to the traditional and inline event models. While the advanced models provide more convenience and func-tionality, most of the features can be implemented with the traditional model.

 

Line 35 assigns "handleEvent()" to the onclick attribute of the div in lines 35–36. This is the inline model for event registration we’ve seen in previous examples. The div in line 39 is assigned an event handler using the traditional model. When the body element (lines 33–40) loads, the registerHandler function is called.

 

Function registerHandler (lines 25–29) uses JavaScript to register the function handleEvent as the event handler for the onclick event of the div with the id "traditional". Line 27 gets the div, and line 28 assigns the function handleEvent to the div’s onclick property.

 

Notice that in line 28, we do not put handleEvent in quotes or include parentheses at the end of the function name, as we do in the inline model in line 35. In the inline model, the value of the XHTML attribute is a JavaScript statement to execute when the event occurs. The value of the onclick property of a DOM node is not an executable state-ment, but the name of a function to be called when the event occurs. Recall that JavaScript functions can be treated as data (i.e., passed into methods, assigned to variables, etc.).

Once the event handler is registered in line 28, the div in line 39 has the same behavior as the div in lines 35–36, because handleEvent (lines 19–22) is set to handle the onclick event for both divs. When either div is clicked, an alert will display "The event was successfully handled."

 

The traditional model allows us to register event handlers in JavaScript code. This has important implications for what we can do with JavaScript events. For example, tradi-tional event-handler registration allows us to assign event handlers to many elements quickly and easily using repetition statements, instead of adding an inline event handler to each XHTML element. In the remaining examples in this chapter, we use both the inline and traditional registration models depending on which is more convenient.

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.