Overview. Event Handling. Introduction. Reviewing the load Event. Event mousemove and the event Object. Rollovers with mouseover and mouseout

Size: px

Start display at page:

Download "Overview. Event Handling. Introduction. Reviewing the load Event. Event mousemove and the event Object. Rollovers with mouseover and mouseout"

Austen French
6 years ago
Views:

1 Overview Introduction Reviewing the load Event Event mousemove and the event Object Rollovers with mouseover and mouseout Form processing with focus, blur, submit, reset More events

2 Introduction The Document Object Model (DOM) gives you scripting access to all the elements on a web page. Using JavaScript, you can create, modify and remove elements in the page dynamically. JavaScript events allow scripts to respond to user interactions and modify the page accordingly Events and event handling help make web applications more dynamic and interactive 2

3 Reviewing the load Event The window object s load event fires when the window finishes loading successfully (i.e., all its children are loaded and all external files referenced by the page are loaded) The next example reviews the load event. The load event s handler creates an interval timer that updates a span with the number of seconds that have elapsed since the document was loaded. The document s paragraph contains the span.

4 The load Event // onload.txt <html> <head> <title>load event</title> <link rel = "stylesheet" type = "text/css" href = "style.css"> <script src = "load.js"></script> </head> <body> <p> Seconds you have spent viewing this page so far: <span id = "sofar">0</span></p> </body> </html>

5 The load Event // load.js window.addeventlistener("load", starttimer, false); var seconds = 0; // function called when the page loads to begin the time function starttimer() window.setinterval("updatetime()", 1000); } // called every 1000 ms to update the time function updatetime() ++seconds; // increments var seconds (initially set to 0) document.getelementbyid("sofar").innerhtml = seconds; }

6 Reviewing the load Event addeventlistener: method that fires when a user clicks a button setinterval(): executes a function, over and over again, at specified time intervals getelementbyid(): method accesses the first element with the specified id. innerhtml: used to change the page's content without refreshing the page. This can make your website feel quicker and more responsive to user input by Pearson Education, Inc. All Rights Reserved.

7 The mousemove Event The following JavaScript code indicates that function start should be called when document loads: document.onload = "start()"; mousemove event occurs whenever the user moves the mouse over the web page The next example creates a simple drawing program that allows the user to draw inside a table element in red or blue by holding down the Shift key or Ctrl key and moving the mouse over the box. ctrlkey property contains a boolean which reflects whether the Ctrl key was pressed during the event shiftkey property reflects whether the Shift key was pressed during the event

8 The mousemove Event // draw.txt <html> <head> <title>simple Drawing Program</title> <link rel = "stylesheet" type = "text/css" href = "style.css"> <script src = "draw.js"></script> </head> <body> <table id = "canvas"> <caption>hold <em>ctrl</em> (or <em>control</em>) to draw blue. Hold <em>shift</em> to draw red.</caption> <tbody id = "tablebody"></tbody> </table> <form action = ""> <p><input id = "clearbutton" type = "button" value = "Clear"></p> </form> </body> </html>

9 The mousemove Event //draw.js //initialization function to insert cells into the table window.addeventlistener( "load", createcanvas, false ); 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" ); row.appendchild( cell ); } // end for tbody.appendchild( row ); } // end for // register mousemove listener for the table (we can do 2 things with canvas: either move mouse ) document.getelementbyid( "canvas" ).addeventlistener( "mousemove", processmousemove, false ); // register Clear button listener ( or clear) document.getelementbyid( "clearbutton" ).addeventlistener( "click", clearcanvas, false ); } // end function createcanvas

10 The mousemove Event // processes the onmousemove event function processmousemove( e ) if ( e.target.tagname.tolowercase() == "td" ) // click on a cell // turn the cell blue if the Ctrl key is pressed if ( e.ctrlkey ) e.target.setattribute( "class", "blue" ); } // end if // turn the cell red if the Shift key is pressed if ( e.shiftkey ) e.target.setattribute( "class", "red" ); } // end if if ( e.altkey ) e.target.setattribute( "class", red" ); } // end if } // end if } // end function processmousemove

11 The mousemove Event function clearcanvas() var tablebody = document.getelementbyid( "tablebody" ) var tableparent = tablebody.parentnode; tableparent.removechild( tablebody ); var newtablebody = document.createelement( "tbody" ); newtablebody.id = "tablebody"; tableparent.appendchild( newtablebody ); createcanvas(); } // end function clearcanvas

12 The mousemove Event document.createelement(): method creates the specified HTML element The node.appendchild(): method adds a node to the end of the list of children of a specified parent node tagname: property returns the tag name of the element. In HTML, the returned value of the tagname property is always in UPPERCASE setattribute(): method adds the specified attribute to an element, and gives it the specified value target: event property returns the element that triggered the event

13 More Events

14 More Events

JavaScript and XHTML. Prof. D. Krupesha, PESIT, Bangalore

JavaScript and XHTML. Prof. D. Krupesha, PESIT, Bangalore JavaScript and XHTML Prof. D. Krupesha, PESIT, Bangalore Why is JavaScript Important? It is simple and lots of scripts available in public domain and easy to use. It is used for client-side scripting.