Thursday, August 6 th, 2015 Instructor: Craig Duckett Event Handling

2 ASSIGNMENT ANNOUNCEMENTS Assignment 1 GRADED AND RETURNED! Woot! Woot! TONIGHT Assignment 1 Revision TONIGHT Lecture 10, Thursday, August 6 th NEXT Assignment 2 due on Lecture 11, NEXT Tuesday, August 11 th, by midnight. Assignment 2 Revision due on Lecture 13, Tuesday, August 18 th, by midnight. Assignment 3 due on Lecture 14, Thursday, August 20 th, by midnight. Assignment 3 Revison due on Lecture 16, Thursday, August 27 th, by midnight.

3 JavaScript Code Checkers JSLint - JSHint - JavaScriptLint - JavaScript Validator - JSFiddle -

4 Event Handling

5 Event Handler What is an Event Handler ? An event handler is a predefined JavaScript property of an object (in most cases an element in the document) that is used to handle an event on a web page. An event is something that happens when the viewer of the page performs some sort of action, such as clicking a mouse button, clicking a button on the page, changing the contents of a form element, or moving the mouse over a link on the page. Events can also occur simply by the page loading or other similar actions. When events occur, you are able to use JavaScript event handlers to identify them and then perform a specific task or set of tasks. JavaScript enables you to react to an action by the user and to make scripts that are interactive, and more useful to you and to the user.

6 Why Event Handlers Are Useful Event handlers are useful because they enable you to gain access to the events that may occur on the page. For instance, if you wanted to send an alert to the viewer when he or she moves the mouse over a link, you could use the event handler to invoke the JavaScript alert you have coded to react to the event. You are now making things happen based on the actions of the user, which enables you to make more- interactive web pages. Creating this interactivity is where many people find that JavaScript starts to become a little more fun to code and to use. JavaScript can make a number of things happen on a Web page that will make the page more interesting than a static HTML document.

7 Understanding Event Handlers Locations and Uses To see how event handlers work, you need to know where you can place them in a document and how to use them to add JavaScript code for an event. Event handlers can be used in a number of locations. They can be used directly within HTML elements by adding special attributes to those elements. They can also be used within the and tags or in an external JavaScript file.

8 Using an Event Handler in an HTML Element To use an event handler directly in an HTML element, you need to know the keyword for the event handler and where to place the event handler within the HTML code. We are already familiar with the onclick event handler, which is used to make something happen when the viewer clicks a specific area of the document.

9 Using an Event Handlers in the Script Code As you know, you can also use an event handler within the script code (whether using the script tags in the HTML document or using an external JavaScript file). One way to do this is to give the element an id attribute and then use our old friend the JavaScript method document.getElementById() to access the element. Once that is done, you can tie an event to the element. function myFunction(){ alert("Yo!"); } var yoButton = document.getElementById("you"); yoButton.onclick = myFunction; // document.getElementById("yo").onclick = myFunction;

10 Events and Event Handlers

11 The Three Phases of Event Dispatch Capturing – The event travels downward (or inward) from the document object to the target object Target – The event triggers on the target object Bubbling – The event targets upward (or outward) from the target object to the document object NOTE: Internet Explorer doesn't support the capturing phase, so if you want to support Internet Explorer browsers and users you should limit your event handlers to the target and bubbling phases. Bubbling Upward and Outward from a click event

12 Learning Event Handlers Now that you know what event handlers are and how to use them, you need to see which event handlers are used for various events on a page. Begin by looking at the table on the next slide, which lists the most common events, their event handlers, and samples of what actions might trigger each event. NOTE: Some of these events, such as the copy event, will only work with certain browsers (which may need to be running in their latest versions). There are also events that work only in Internet Explorer (see ) or that are not necessarily cross browser as of yet (see ).

13

14 The onabort Event Handler The abort event occurs when a viewer stops (aborts) the loading of an image. The event handler used for this event is onabort. For example, if you wanted to display a message when the viewer stopped an image from loading, you could use the following code:

15 The onblur Event Handler The blur event occurs when the viewer takes the focus away from a form element or a window. The event handler used for this event is onblur. To take the focus off something, the viewer usually gives focus to something else. For instance, the viewer could move from one form element to another, or from one window to another. The onblur event handler can be used in such places as a form element’s tag or in the opening body tag (for windows). NOTE: The blur event is triggered only when the viewer gives focus to another area, which is the only way the browser will know the viewer released the focus from the first area. For example, when the viewer presses the ENTER key in an input field, the focus goes from the input field to the document window. To see the blur event in action, you might also use a text box.

16 The onchange Event Handler The change event occurs when a viewer changes something within a form element. For instance, the viewer might change the text in a text box or make a selection from a select box. You handle this event with the onchange event handler. You can see how this works by setting up a select box. You can give the viewer some choices within the select box. If the user changes the default option by choosing a new one, you send an alert to ask why it was changed.

17 The onclick Event Handler The click event occurs when a viewer clicks on an element in a web page. Often, these are form elements and links. In modern browsers, the click event also works for more general areas, such as within a table cell or within a set of and tags. When something is clicked, you want an event to occur. To make this happen, you can place the onclick event handler inside the tag.

18 The onfocus Event Handler The focus event occurs when the viewer gives focus to an element on a web page. A viewer gives focus to something by clicking somewhere within the item, by using the keyboard to move to the item (often via the TAB key), or via a script. For instance, a viewer who clicks a text input box (before entering anything) gives that text box the focus. The event handler used with this event is onfocus, and it can be used in places such as a form element or in the opening body tag on a web page (for focus on a window). The onfocus event handler also has a related method called focus(), which is covered in the next Lecture when we look at the Windows Object.

19 The onkeydown Event Handler The keydown event occurs when the viewer presses down a key on the keyboard. To handle this event, you use onkeydown. You can place this event handler in almost any HTML tag on a Web page.

20 The onkeypress Event Handler The keypress event occurs when a viewer presses down a key on the keyboard and the corresponding character is typed. This occurs between the keydown and the keyup events. To use this event, you use the onkeypress event handler, which can be placed in almost any HTML tag on a web page.

21 The onkeyup Event Handler The keyup event occurs when the viewer lets go of a key on the keyboard, releasing the key. The event handler for this is onkeyup, and it can be placed in almost any HTML tag on a web page. NOTE: For more information on the keydown, keypress, and keyup events, go to This will give you a better idea of how the events work in different browsers and the type of coding you will need to use to work with keystrokes cross-browser. Since these are supported somewhat inconsistently from browser to browser, they will not be covered in detail in this lecture at this time.

22 The onload Event Handler The load event occurs when a web page finishes loading. To handle this event, you use the onload event handler. Keep in mind the load event occurs at a slightly different time than the alert scripts you placed in your pages in earlier examples and exercises. Those started your tasks before the remainder of the page began loading. With the load event, however, your tasks will be executed as soon as the page finishes the loading process.

23 The onmousedown Event Handler The mousedown event occurs when a viewer presses the mouse button down but before the click is complete (does not need to be released). To handle this event, you use the onmousedown event handler, which can be placed within almost any HTML tag on a web page.

24 The onmouseup Event Handler The mouseup event occurs when the viewer releases the mouse button after pressing it down. The onmouseup event handler is used for this event, and it can be placed within almost any HTML tag on a web page.

25 The onmouseover Event Handler The mouseover event occurs when a viewer moves the mouse cursor over an element on the page such as a text link, linked image, or linked portion of an image map. The mouseover event will also work in numerous other areas such as table cells and and tags. The mouseover event is handled with the onmouseover event handler. The quickest way to use an onmouseover event handler is to set up a text link. When you add the onmouseover event handler to the link, you have the option to perform JavaScript commands when the viewer passes the cursor over the link. The mouseover event will become much more useful to you in later lectureswhen you learn more things about what you can do with the various parts of a page. BEWARE: In the provided example, the visitor doesn’t even get to click the link before being greeted with an alert. Keep in mind that a script like this could annoy your visitors if it is overused. The alert pops up as soon as the mouse cursor moves over the link. Since there is no need to click the link for something to happen, the browser won’t try to follow the link afterward. In fact, with this script in place, it is quite difficult to click the link at all because the alert keeps popping up when you move your mouse over to click it!

26 The onmouseout Event Handler The mouseout event occurs when a viewer moves the mouse cursor away from an area on the page such as a link, linked image, or linked area of an image map. As with the mouseover event, most browsers will support the mouseout event in numerous areas. You take care of a mouseout event by using the onmouseout event handler. Again, you can see the mouseout event most easily by setting up a link and adding the onmouseout event handler to the link. This time, you can make an alert pop up once the user moves the mouse away from the link after passing over it (assuming it has not been clicked).

27 The onreset Event Handler The reset event occurs when a viewer uses a form reset button to reset the form fields in a form. To take care of this event, you use the onreset event handler, which can be added to the opening form tag in a form. The onreset event handler also has a related method called reset(), which will be covered in Lecture 17 when we look at advanced form handling.

28 The onsubmit Event Handler The submit event only occurs when the viewer submits a form on a web page. This event uses the onsubmit event handler, which can be called from an opening form tag in a document. The onsubmit event handler also has a related method called submit(), which will be covered in Lecture 17 when we look at advanced form handling.

29 The onunload Event Handler The unload event occurs when a viewer leaves the current web page. The viewer could leave by clicking a link, typing another address in the browser, or closing the window. The event handler used for the unload event is onunload. This event is known to annoy viewers, because it enables the site owner to do something while visitors are trying to move on to another page or another web site (forcing them to wait or do something first). NOTE: Currently this only seems to work in Internet Explorer. It used to work with Firefox, but hasn’t since version 24. It does not work with Chrome or Safari. As such, you might want to use this with the sole purpose of irritating IE users ;->

30 Window Events

31 Window Events We will look at Window events when we dedicate the next lecture (Lecture 11) to the Window Object

32 Other Ways to Register Events

33 The addEventListener() Method The addEventListener() method allows you to specify an event, a function to execute for the event, and a value of true or false depending on how you want the event handler function to be executed in the capturing (true) or bubbling (false) phase. The general format looks like this: element.addEventListener('event_type', function_name, true_or_false); Thus, if you want to create a linked input button you could create some JavaScript code to look like this: var page1 = " var b1 = document.getElementById("btn1"); b1.addEventListener('click', function() { window.location = page1; }, false);

34 Event Handling Links of Interest HTML DOM Events (W3Schools) HTML DOM Events JavaScript HTML DOM Events (W3Schools) JavaScript HTML DOM Events JavaScript Event Handlers (eBorCom) JavaScript Event Handlers Understanding Event Handling (JavaScript Kit) Understanding Event Handling Advanced JavaScript Event Handling (HTML Goodies) Advanced JavaScript Event Handling Introducing Browser Events (JavaScript Info) Introducing Browser Events Bubbling and Capturing (JavaScript Info) Bubbling and Capturing YouTube Video: JavaScript Event Handlers (Lynda.com)JavaScript Event Handlers YouTube Video: JavaScript Event Handlers (The New Boston)JavaScript Event Handlers

35 Please begin working on the LECTURE 10 In-Class Exercises. When you have completed your ICE, call the Instructor over to verify your work. If you have questions about your work, please call over the Instructor to clarify. Once you have completed your ICEs, you are free to go for the day. If you don't finish your ICEs by the end of class, you will still get full credit for actively doing the work, but it is greatly recommended you finish any outstanding ICEs outside of class.