1. Event Handlers Events are asynchronous. When an event occurs, JavaScript can execute code in response to the user’s action. This response to the user-initiated event is called event handling. Event handlers are not enclosed between tags. They are attributes of HTML tags. The string that is assigned to the event handlers is the command that will be executed when the event is triggered by the user.

2. onClick event – E1 Wake up call function wakeupCall(){ setTimeout('alert("Time to get up!")',5000); } <input type="button" value="Wake me" onClick="wakeupCall()">

3. onUnload, onClick events – E2 An event <input type="button" value="Click here to be alerted" onClick='alert("Watch out! An asteroid is approaching earth!")'>

4. onFocus, onClick events– E3 Simulation Methods <form name="myform" action="http://localhost/cgi-bin/doit.pl" method="post"> Enter your name: <input type="text" name="namefield" size="30" value="Name: " onFocus="this.select()"> Enter your address: <input type="text" name="addressfield" size="30" value="Address: " onFocus="this.select()"> Click here to submit your form Click here to reset your form

5. onSubmit event - Return Values – E4 An HTML Form and the onSubmit Event Handler function checkForm(yourinfo){ if(yourinfo.namestring.value == "" || yourinfo.namestring.value == null){ alert("Please type in your name"); return(false); } else{return(true);} } <form name="info" action="/cgi-bin/bookstuff/form1.cgi" method="post" onSubmit="return checkForm(document.info)"> Type your name here:

6. onLoad, onUnload events – E5 Mouse Events var sec=0; function now(){ var newdate= new Date(); var hour=newdate.getHours(); var minutes=newdate.getMinutes(); var seconds=newdate.getSeconds(); var timestr=hour+":"+minutes+":"+seconds; window.setInterval("trackTime()", 1000); alert("Your document has finished loading\n"+ "The time: "+timestr); } function trackTime(){ sec++; } function howLong(){ alert("You have been browsing here for "+ sec+" seconds"); } When you leave or reload this page, an alert dialog box will appear.

7. onFocus, onBlur events – E6 Frame Me! Left Frame function focus_on_me(){ document.bgColor="pink"; // Current doc is the left frame window.status="focus leftframe"; } function defocus_me(){ parent.left.document.bgColor="yellow"; // Another way to reference window.status="focus rightframe"; // See the status bar } Right Frame right frame

8. focus(), blur() methods – E7 The focus and blur methods function newWindow(){ winObj=window.open("summertime.jpg", "summer","width=650,height=200,resizable=yes,scrollbars=yes,location=yes"); winObj.moveTo(0,0); // Move to lefthand corner of screen winObj.focus(); // New window gets the focus //winObj.blur(); } function closeWindow(){ winObj.close(); // Close the new window } Summer Scene from the Old Country <input type=button value="Open Window" onClick="javascript:newWindow();"> <input type=button value="Close Window" onClick="javascript:closeWindow();">

9. onDblClick, onMouseOver, onMouseOut Events – E8 Mouse Events var counter=0; function alertme(){ alert("I'm outta hea!"); window.close(); } function track_Moves(){ counter++; if(counter==1){alert(counter + " mouse move so far!");} else{alert(counter + " mouse moves so far!");} } Double click anywhere on this page to get out! When the mouse moves over the link, an event is triggered. onMouseOver When the moves away from a link, an event is triggered. onMouseOut When the mouse moves in or out of the button, a function is called that keeps track of how many times the mouse touched the button. <input type="button" value="onMouseMove" onMouseMove="track_Moves();">

10. onMouseOver, onMouseOut events – E9 Mouse Events onMouseOver onMouseOut

11. SlideShow – E10 The Four Seasons var season = new Array(); var indx = 0; var timeDelay=2000; if(document.images){ season[0]=new Image(); season[0].src="winter.jpg"; season[1]=new Image(); season[1].src="summer.jpg"; season[2]=new Image(); season[2].src="fall.jpg"; season[3]=new Image(); season[3].src="spring.jpg"; } function changeSeason(){ var size= season.length - 1; if( indx < size ) {indx++;} else {indx = 0;} document.times.src= season[indx].src; timeout=setTimeout('changeSeason()', timeDelay); } function stopShow(){clearTimeout(timeout);} The 4 Seasons To see slide show, put your mouse on the image. Move your mouse away from the image, to stop it.

12. onClick event on a link – E11 De-activate the hotlink Click here

13. onClick on buttons with “this” – E12 The this keyword function display_formval(myform){ alert("Form's text value: " + myform.namestring.value ); } function display_buttonval(mybutton){ alert("button value is: " + mybutton.value); } Type your name here:

14. onClick on buttons – E13 Event Handling and Forms function greetme(message){alert(message);} Greetings Message <input type="button" value="Morning" onClick="greetme('Good morning. This is your wakeup call!')"> <input type="button" value="Night" onClick="greetme('Have a pleasant evening.\nSweet dreams...')">

15. Event handlers and event methods – E14 Event Handling var tries=0; function randomize(){ var now=new Date(); num=(now.getSeconds())%10; // Very cool! num++; } function guessit(form){ if (form.tfield.value == num){ alert("Correct!!"); form.tfield.focus(); n=0; randomize(); } else{ tries++; alert(tries + " Wrong. Try again."); form.tfield.value=""; // Clear the text box form.tfield.focus(); // Put the cursor in the text box } Pick a number between 1 and 10 <input type="textbox" size=4 name="tfield"> <input type="button" name="button1" value="Check my guess" onClick="guessit(this.form)">

16. onFocus and onBlur events – E15 Using the onFocus Event Handler function handler(message){window.status = message; // Watch the status bar} The onFocus Event Handler (When you click in one of the boxes, focus goes to the status bar) Type your name: Talk about yourself here: <textarea name="comments" align="left" onFocus="handler('Did you add comments?')" rows="5" cols="50">I was born...

17. onChange event – E16 onChange Event Handler Please enter your grade: 100){alert('Please enter a grade between 0 and 100');} else{confirm('Is '+ grade + ' correct?');}" >

18. onSubmit event – E17 The onSubmit Event Handler function popUp(){ newWin=window.open('','NewWin','toolbar=no,status=no,width=500,height=200'); newWin.document.write(" Form data "); newWin.document.write(" Your name is: " + document.form1.namestring.value); newWin.document.write(" Your address is: " + document.form1.address.value); } Type your name: Type in your address:

19. onSubmit with return – E18 Check it Out! function okForm(form){ if (form.accept.checked == true){return true;} else{ alert("Please check the box!"); form.accept.focus(); return false; } Thank you for your order. Check the box to continue.

20. onKeyPress, onKeyDown – E19 Key Events <body bgcolor="yellow" onKeyPress=" if(navigator.appName=='Netscape') {alert('The key pressed:'+ event.which + 'ASCII '+ String.fromCharCode(event.which))} else {alert('The key pressed:'+ event.keyCode + 'ASCII '+ String.fromCharCode(event.keyCode));}"> Press any key on your keyboard and see what happens!

21. onKeyDown, onKeyUp – E20 Key Events Events A down bouncing arrow will appear when you press a key down and a up jumping arrow appears when you release the key Type something while in the box: <input type="text" size=10 onKeyDown="document.Arrow.src='images/down_arrow.gif'" onKeyUp="document.Arrow.src='images/up_arrow.gif'">

22. onError – E21 Wake up call function wakeupCall(){timeout=setTimeout('alert("Time to get up!")',2000);}

23. Event properties – E22 Event Properties <body bgcolor="yellow" <input type=button name="mybutton“ value="Click here" onClick="alert(event.type + ' ' +event. srcElement);">