Lecture #5 Event and Event Handler - Interaction
Total Page:16
File Type:pdf, Size:1020Kb
Lecture #5 Event and Event Handler - Interaction Introduction Interaction is one of the most important components that make the computer games entertaining. Game programmers need to develop skills in the event-based programming paradigm in which the flow of the program is determined by events. For example, sensor outputs or user actions (mouse clicks, key presses) or messages from other programs or threads. Since computer games heavily replies on the event-driven programming (EDP) and interaction systems are usually event-driven, be sure to have a good understanding of how handle user events with support of the even model provided by the language. During normal program execution, a large number of events occur, so skilled use of the event-oriented programming is very rewarding. It opens up possibilities for creating very intricate and complex game programs. What is an event? An event is a notification that occurs in response to an action, such as a change in state, or as a result of the user clicking the mouse or pressing a key while viewing the document. An event handler is code, typically a function or routine written in a scripting language, that receives control when the corresponding event occurs. When a user plays a game, any activity the user has is an event. Objects on the game can contain the so-called event handler that can trigger your functions to respond to such events. In the previous lectures, you had learned to use some of the commonly used events. For example, you add an onClick event to call a function when the user clicks that button (an object). <!-- IE10, FireFox25, Chrome --> <!DOCTYPE html> <html> <head> <script type="text/javascript"> function myFunction() // add event listener to b1 { window.alert("Hi"); } </script> </head> <body> <button onClick="myFunction()">Click Me</button> </body> </html> In this case, the button is an object, and it has an event onClick that triggers a user-defined function named myFunction(), which also serves as the event handler. As a reminder, you had also learned to register an onload event with the window object. In the following example, the onload events calls myFunction() which serves as the event handler. <!-- IE10, FireFox25, Chrome --> <!DOCTYPE html> <html> <head> <script type="text/javascript"> function myFunction() 127 Penn P. Wu, PhD { window.alert("Hi"); } window.onload = function() { myFunction(); } </script> </head> <body></body> </html> Unlike the above code which calls the function without user being involved, the following uses an onkeydown event which requires the users to press a key on the keyboard to trigger the event. <!-- IE10, FireFox25, Chrome --> <!DOCTYPE html> <html> <head> <script type="text/javascript"> function myFunction() { window.alert("Hi"); } document.onkeydown = function() { myFunction(); } </script> </head> <body></body> </html> Since the Document Object Model (DOM) Level 2 Events Specification was released by the W3C, the new way to apply events to HTML elements looked like this: document.getElementById("s1").addEventListener("click", myFunction, false); or var s1 = document.getElementById("s1"); s1.addEventListener("click", myFunction, false); The addEventListener() method registers a single event listener on a single target. The event target may be a single element in a document. The syntax is: objectId.addEventListener(eventType, listener, useCapture); where, eventType is a string representing the event type, such as “click”, “load”, “keydown”, etc. listener is the object that receives a notification when an event of the specified type occurs. This must be an object implementing the EventListener interface, or simply a JavaScript function. 128 Penn P. Wu, PhD useCapture is an optional value. If true, useCapture indicates that the user wishes to initiate capture. If not specified, useCapture is false. In the above example, the first parameter of the addEventListener method is the type of the event. Notice that it no longer uses the “on” prefix. The second parameter is a reference to the function we want to call when the event occurs. In the following example, sayHi() is a listener for click events registered using addEventListener(). A click anywhere on the string “Click Me” will bubble up to the handler and run sayHi. <!-- IE10, FireFox25, Chrome --> <!DOCTYPE html> <html> <head> <script type="text/javascript"> function loadIt() { var b1 = document.getElementById("b1"); // add event listener to b1 b1.addEventListener("click", sayHi, false); } function sayHi() { window.alert("Hi!"); } document.addEventListener("DOMContentLoaded", loadIt, false); </script> </head> <body> <b id="b1">Click Me</b> </body> </html> The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. The DOMContentLoaded event fires when parsing of the current page is complete; the load event fires when all files have finished loading from all resources, including ads and images. DOMContentLoaded is a great event to use to hookup UI functionality to complex web pages. Visit the http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html pag for a comparison of loading speed between “DOMContentLoaded” and the “onload” event. You can rewrite one of the above sample code to: <!-- IE10, FireFox25, Chrome --> <!DOCTYPE html> <html> <head> <script type="text/javascript"> function myFunction() { window.alert("Hi"); } 129 Penn P. Wu, PhD document.addEventListener("DOMContentLoaded", myFunction, false); </script> </head> <body></body> </html> Another example is <!-- IE10, FireFox25, Chrome --> <!DOCTYPE html> <html> <head> <script type="text/javascript"> function myFunction() { window.alert("Hi"); } document.addEventListener("keydown", myFunction, false); </script> </head> <body></body> </html> There are some general-purpose properties of the event object, as listed in the following table, that might be useful in game programming. Property Description SrcElement The element that fired the event type Type of event returnValue Determines whether the event is cancelled cancelBubble Can cancel an event bubble Both the event.srcElemet nand event.type properties contain the data to the event and the element that trigger the event. Since the srcElement property can return the identity (as specified by “id”) that fired the event. This is an object, and has the same properties as the element. For example, <!-- IE10, FireFox25, Chrome --> <!DOCTYPE html> <html> <head> <script type="text/javascript"> function init() // add event listener to b1 { var b1 = document.getElementById("b1"); b1.addEventListener("click", getSrc, false); } function getSrc(e) { var obj = e.srcElement; window.alert(obj.id + "\n" + obj.src + "\n" + obj.tagName); } document.addEventListener("DOMContentLoaded", init, false); </script> 130 Penn P. Wu, PhD </head> <body> <img id="b1" src="picture1.jpg"> </body> </html> When clicking on this image with an id of “b1” and a src of “picture1.jpg”, event.srcElement.id will return “b1”, the event.srcElement.src will return “xxxxx/picture1.jpg” where xxxxx/ refers to the file path. Similarly, srcElement has a tagName property that will return “IMG”. A sample output looks: By the way, if the image has a style height of 100px, then event.srcElement.style.height will return “100px”. Interestingly, event.srcElement is only available in IE. In all other browsers it is event.currentTarget. The following is the non-IE version. <!-- IE10, FireFox25, Chrome --> <!DOCTYPE html> <html> <head> <script type="text/javascript"> function init() { // add event listener to b1 var b1 = document.getElementById("b1"); b1.addEventListener("click", getSrc, false); } function getSrc(e) { // for non-IE var obj = e.currentTarget; window.alert(obj.id + "\n" + obj.src + "\n" + obj.tagName); } document.addEventListener("DOMContentLoaded", init, false); </script> </head> <body> <img id="b1" src="picture1.jpg"> </body> </html> A cross-browser way is to use the conditional (ternary) operator (?:) check whether the browser support IE model. As a reminder, the syntax is: booleanExpression ? expression1 : expression2 The following demonstrates how to reach this objective. <!-- IE10, FireFox25, Chrome --> <!DOCTYPE html> <html> <head> 131 Penn P. Wu, PhD <script type="text/javascript"> function init() { // add event listener to b1 var b1 = document.getElementById("b1"); b1.addEventListener("click", getSrc, false); } function getSrc(e) { var obj = (e.srcElement)?(e.srcElement):(e.currentTarget); window.alert(obj.id + "\n" + obj.src + "\n" + obj.tagName); } document.addEventListener("DOMContentLoaded", init, false); </script> </head> <body> <img id="b1" src="jlo.png"> </body> </html> The event.type property displays the event name. If the event handler is the onclick, the type will be “click”, and it will be “keypress” if the event is onKeyPress, then type will be. <!-- IE10, FireFox25, Chrome --> <!DOCTYPE html> <html> <head> <script type="text/javascript"> function init() { // add event listener to b1 var b1 = document.getElementById("b1"); b1.addEventListener("click", getSrc, false); } function getSrc(e) { window.alert(e.type); // for IE and non IE } document.addEventListener("DOMContentLoaded", init, false); </script> </head> <body> <img id="b1" src="picture1.jpg"> </body> </html> Here is a list of all the event handlers in JavaScript, along with the objects they apply to and the events that trigger them: Table: Common Event Handlers Event Applies to: Triggered when: onAbort Image