Event Handling

© Copyright 2014, Fred McClurg All Rights Reserved

2

What is an event?

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

3

Element Event Handling

Discussion:An in-line event can attached to most elements.

Example:

<p onclick="alert( 'You clicked?' );"> Books don't change people; paragraphs do, sometimes even sentences. -- John Piper</p>

eventViaElement.html

4

Event via Anonymous Function

Discussion:Event handlers can be attached to most elements. Anonymous functions are often used to define event actions.

Example:<p id="clickMe"> Is is better to lose your life than to waste it. -- John Piper</p>

<script> var para = document.getElementById( "clickMe" ); // define event handler para.onclick = function() { // anonymous function alert( "Did you need something?" ); }; // note: semi-colon required</script> eventViaAnonFunct.html

5

Validation via onblur() EventDiscussion:

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:<form> Age: <input type="text" id="age" onblur="checkNumber( 'age' );" /> <p /> IQ: <input type="text" id="iq" onblur="checkNumber( 'iq' );" /> <p /> <input type="button" value="Post to Facebook" /></form>

<script> 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." ); } }</script> eventOnblurValidation.html

6

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:<form> First: <input type="text" id="fname" value="first name only" /> <p /> Last: <input type="text" id="lname" value="enter last name" /> <p /></form>

<script> 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" );</script>

eventOnblurOnFocus.html

7

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:<image src="images/lightRight.png" id="trainLight" />

<script> var imgObj = document.getElementById( "trainLight" );

imgObj.onmouseover = function() { imgObj.setAttribute( "src", "images/lightLeft.png" ); };

imgObj.onmouseout = function() { imgObj.setAttribute( "src", "images/lightRight.png" ); };</script> hoverOnmouseoverOut.html

8

Toggle Classes via onclick() (CSS)

Discussion:Two different classes can be set and toggled by a clickable div.

Example:<style type="text/css"> 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; }</style>

toggleClassesOnclick.html

9

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:<div class="redDiv" id="divBlock">Red</div>

<script>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"; }};</script>

toggleClassesOnclickViaChain.html

10

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:<div class="redDiv" id="divBlock">Red</div>

<script>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"; }};</script>

toggleClassesOnclickViaVar.html

11

Event onkeyup() via text entryDiscussion:

The onkeyup() event is triggered after any key is released.

Example:<form> <textarea rows="5" cols="60" id="textBlock">"Desire that your life count for something great! ...-- John Piper, Don't Waste Your Life</textarea> <p /> Count: <input type="text" id="textCount" size="4" value="193" readonly /></form>

<script> var textObj = document.getElementById( "textBlock" ); var counterObj = document.getElementById( "textCount" );

textObj.onkeyup = function() { counterObj.value = textObj.value.length; };</script> eventOnkeypressTextCount.html