Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Event onmousemove, the event Object and this - 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

Event onmousemove, the event Object and this - JavaScript(Js)

This section introduces the onmousemove event, which fires repeatedly whenever the user moves the mouse over the web page.

Event onmousemove, the event Object and this


This section introduces the onmousemove event, which fires repeatedly whenever the user moves the mouse over the web page. We also discuss the event object and the keyword this, which permit more advanced event-handling capabilities. Figure 13.3 uses on-mousemove and this to create a simple drawing program that allows the user to draw inside a box in red or blue by holding down the Shift or Ctrl keys.

 

The XHTML body has a table with a tbody containing one row that gives the user instructions on how to use the program. The body’s onload attribute (line 61) calls func-tion createCanvas, which initializes the program by filling in the table.

 

The createCanvas function (lines 23–41) fills in the table with a grid of cells. The CSS rule in lines 14–15 sets the width and height of every td element to 4px. Line 11

 

      <?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.3: draw.html -->

 

      <!-- A simple drawing program. -->

 

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

 

      <head>

 

      <title>Simple Drawing Program</title>

 

        <style type = "text/css">

 

#canvas { width: 400px;

         border: 1px     solid #999999;

          border-collapse: collapse    }

td       { width: 4px;      

         height: 4px     }   

th.key   { font-family: arial, helvetica, sans-serif;

         font-size: 12px;

         border-bottom: 1px solid #999999 }

        </style>

 

        <script type = "text/javascript">

        <!--

 

        //initialization function to insert cells into the table

 

        function createCanvas ()

{

var side = 100;

var tbody = document.getElementById( "tablebody" );

         

for ( var i = 0; i < side; i++ )

{        

var row = document.createElement( "tr" );

         

for ( var j = 0; j < side; j++ )

{        

var cell = document.createElement( "td" );

         cell.onmousemove = processMouseMove;   

row.appendChild( cell );

} // end for

         

tbody.appendChild( row );

        } // end for

 

} // end function createCanvas

        // processes the onmousemove event

 

        function processMouseMove( e )

{

// get the event object from IE

if ( !e )

var e = window.event;

 

// turn the cell blue if the Ctrl key is pressed

if ( e.ctrlKey )

this.style.backgroundColor = "blue";

 

// turn the cell red if the Shift key is pressed

if ( e.shiftKey )

this.style.backgroundColor = "red";

        } // end function processMouseMove

        // -->

 

        </script>

 

        </head>

 

        <body onload = "createCanvas()">

 

        <table id = "canvas" class = "canvas"><tbody id = "tablebody">

 

        <tr><th class = "key" colspan = "100">Hold <tt>ctrl</tt>

 

        to draw blue. Hold <tt>shift</tt> to draw red.</th></tr>

 

        </tbody></table>

 

        </body>

 

</html>

a) The page loads and fills with white cells. With no keys held down, moving the mouse does not draw anything.




Fig. 13.3 | Simple drawing program.

dictates that the table is 400px wide. Line 13 uses the border-collapse CSS property to eliminate space between the table cells.

 

Line 25 defines variable side, which determines the number of cells in each row and the number of rows created by the nested for statements in lines 28–40. We set side to 100 in order to fill the table with 10,000 4px cells. Line 26 stores the tbody element so that we can append rows to it as they are generated.

The nested for statements in lines 28–40 fill the table with a 100 × 100 grid of cells. The outer loop creates each table row, while the inner loop creates each cell. The inner loop uses the createElement method to create a table cell, assigns function process-MouseMove as the event handler for the cell’s onmousemove event and appends the cell as a child of the row. The onmousemove event of an element fires whenever the user moves the mouse over that element.

 

At this point, the program is initialized and simply calls processMouseMove whenever the mouse moves over any table cell. The function processMouseMove (lines 44–57) colors the cell the mouse moves over, depending on the key that is pressed when the event occurs. Lines 44–48 get the event object, which stores information about the event that called the event-handling function.

 

Internet Explorer and Firefox do not implement the same event models, so we need to account for some differences in how the event object can be handled and used. Firefox and other W3C-compliant browsers (e.g., Safari, Opera) pass the event object as an argu-ment to the event-handling function. Internet Explorer, on the other hand, stores the event object in the event property of the window object. To get the event object regardless of the browser, we use a two-step process. Function processMouseMove takes the param-eter e in line 44 to get the event object from Firefox. Then, if e is undefined (i.e., if the client is Internet Explorer), we assign the object in window.event to e in line 48.

 

In addition to providing different ways to access the event object, Firefox and Internet Explorer also implement different functionality in the event object itself. How-ever, there are several event properties that both browsers implement with the same name, and some that both browsers implement with different names. In this book, we use prop-erties that are implemented in both event models, or we write our code to use the correct property depending on the browser—all of our code runs properly in IE7 and Firefox 2.

 

Once e contains the event object, we can use it to get information about the event. Lines 51–56 do the actual drawing. The event object’s ctrlKey property contains a boolean which reflects whether the Ctrl key was pressed during the event. If ctrlKey is true, line 52 executes, changing the color of a table cell.

 

To determine which table cell to color, we introduce the this keyword. The meaning of this depends on its context. In an event-handling function, this refers to the DOM object on which the event occurred. Our function uses this to refer to the table cell over which the mouse moved. The this keyword allows us to use one event handler to apply a change to one of many DOM elements, depending on which one received the event.

Lines 51–52 change the background color of this table cell to blue if the Ctrl key is pressed during the event. Similarly, lines 55–56 color the cell red if the Shift key is pressed. To determine this, we use the shiftKey property of the event object. This simple func-tion allows the user to draw inside the table on the page in red and blue. You’ll add more functionality to this example in the exercises at the end of this chapter.

 

This example demonstrated the ctrlKey and shiftKey properties of the event object. Figure 13.4 provides a table of some important cross-browser properties of the event object.

 

This section introduced the event onmousemove and the keyword this. We also dis-cussed more advanced event handling using the event object to get information about the event. The next section continues our introduction of events with the onmouseover and onmouseout events.



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


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