Event Handling © Copyright 2014, Fred McClurg All Rights Reserved

What is an event? Discussion: An event is an action that is generated by HTML elements. JavaScript can respond to those events. 2

Element Event Handling Discussion: An in-line event can attached to most elements. Example: Books don't change people; paragraphs do, sometimes even sentences. -- John Piper 3 eventViaElement.html

Event via Anonymous Function Discussion: Event handlers can be attached to most elements. Anonymous functions are often used to define event actions. Example: Is is better to lose your life than to waste it. -- John Piper var para = document.getElementById( "clickMe" ); // define event handler para.onclick = function() { // anonymous function alert( "Did you need something?" ); }; // note: semi-colon required 4 eventViaAnonFunct.html

Validation via onblur() Event Discussion: The onblur() event is triggered when an element loses focus. It is ideal for text box controls because the user has usually completed text entry when the event fires. Example: Age: <input type="text" id="age" onblur="checkNumber( 'age' );" /> IQ: <input type="text" id="iq" onblur="checkNumber( 'iq' );" /> <input type="button" value="Post to Facebook" /> function checkNumber( id ) { var textObj = document.getElementById( id ); var textStr = textObj.value; var regExp = /^\d+$/; // one or more numeric digits if ( ! textStr.match( regExp ) ) { alert( "'" + textStr + "' is not a number." ); } 5 eventOnblurValidation.html

Prompt value via onfocus() and onblur() Discussion: The onfocus() event is triggered when an element gains focus. It is ideal for text box controls when the user is ready to begin entering text. Example: First: <input type="text" id="fname" value="first name only" /> Last: <input type="text" id="lname" value="enter last name" /> function textPrompt( id, prompt ) { var nameField = document.getElementById( id ); nameField.onfocus = function() { if ( nameField.value == prompt ) { nameField.value = ""; // clear prompt } }; nameField.onblur = function() { if ( nameField.value == "") { // no text input nameField.value = prompt; // display prompt } }; } textPrompt( "fname", "first name only" ); textPrompt( "lname", "enter last name" ); 6 eventOnblurOnFocus.html

Image hover via onmouseover() and onmouseout() Discussion: The onmouseover() event is triggered when the mouse enters the boundary of an element. The onmouseout() event is triggered when the mouse leaves the boundary of an element. Example: var imgObj = document.getElementById( "trainLight" ); imgObj.onmouseover = function() { imgObj.setAttribute( "src", "images/lightLeft.png" ); }; imgObj.onmouseout = function() { imgObj.setAttribute( "src", "images/lightRight.png" ); }; 7 hoverOnmouseoverOut.html

Toggle Classes via onclick() (CSS) Discussion: Two different classes can be set and toggled by a clickable div. Example: div#divBlock { height: 100px; width: 300px; font-size: 100px; line-height: 100px; /* vertical alignment */ text-align: center; /* horizontal alignment */ font-weight: bold; padding: 25px; } div.redDiv { background-color: red; } div.greenDiv { background-color: green; } 8 toggleClassesOnclick.html

Toggle Classes onclick() via Chaining Discussion: Multiple methods and properties can be “chained” together. The current class of an element can be retrieved and set via the “className” attribute. Example: Red document.getElementById("divBlock").onclick = function() { if ( document.getElementById("divBlock").className == "redDiv" ) { document.getElementById("divBlock").className = "greenDiv"; document.getElementById("divBlock").innerHTML = "Green"; } else { document.getElementById("divBlock").className = "redDiv"; document.getElementById("divBlock").innerHTML = "Red"; } }; 9 toggleClassesOnclickViaChain.html

Toggle Classes onclick() via Variables Discussion: Instead of using “chaining” variables can be used to define the values. The current class of an element can be retrieved and set via the “className” attribute. Example: Red var toggleBlock = document.getElementById("divBlock"); toggleBlock.onclick = function() { if ( toggleBlock.className == "redDiv" ) { toggleBlock.className = "greenDiv"; toggleBlock.innerHTML = "Green"; } else { toggleBlock.className = "redDiv"; toggleBlock.innerHTML = "Red"; } }; 10 toggleClassesOnclickViaVar.html

Event onkeyup() via text entry Discussion: The onkeyup() event is triggered after any key is released. Example: <textarea rows="5" cols="60" id="textBlock"> "Desire that your life count for something great! John Piper, Don't Waste Your Life Count: <input type="text" id="textCount" size="4" value="193" readonly /> var textObj = document.getElementById( "textBlock" ); var counterObj = document.getElementById( "textCount" ); textObj.onkeyup = function() { counterObj.value = textObj.value.length; }; 11 eventOnkeypressTextCount.html