BIT116: ScriptingLecture 10

Thursday, August 6th, 2015

Instructor: Craig Duckett

cduckett@cascadia.edu

Event Handling

2

ASSIGNMENT ANNOUNCEMENTS

Assignment 1 GRADED AND RETURNED! Woot! Woot!

Assignment 1 Revision TONIGHT Lecture 10, Thursday, August 6th

Assignment 2 due on Lecture 11, NEXT Tuesday, August 11th , by midnight.

Assignment 2 Revision due on Lecture 13, Tuesday, August 18th , by midnight.

Assignment 3 due on Lecture 14, Thursday, August 20th , by midnight.

Assignment 3 Revison due on Lecture 16, Thursday, August 27th , by midnight.

3

JavaScript Code Checkers

• JSLint - http://www.jslint.com/ • JSHint - http://www.jshint.com/ • JavaScriptLint - http://www.javascriptlint.com/online_lint.php • JavaScript Validator - http://codebeautify.org/jsvalidate • JSFiddle - http://jsfiddle.net/

4

Event Handling

5

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 <script> and </script> 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.

<input type="button" value="Click Me!" onclick="JavaScript code here">

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_01_onclick.html

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.

<input type="button" value="Click Me!" id="yo">

<script>function myFunction(){

alert("Yo!");}

var yoButton = document.getElementById("you");yoButton.onclick = myFunction;// document.getElementById("yo").onclick = myFunction;</script>

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_02_in_script.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_03_in_script.html

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 objectTarget – The event triggers on the target objectBubbling – 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

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/target1.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/target2.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/bubbling.html

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 http://msdn.microsoft.com/en-us/library/ms533051(VS.85).aspx ) or that are not necessarily cross browser as of yet (see http://www.w3.org/TR/DOM-Level-3-Events/ ).

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_00_event_bindings.html

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:

<img src="large_image.jpg" onabort=alert('Image load stopped');">

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_04_onabort.html

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.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_05_onblur.html

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.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_06_onchange.html

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 <div> and </div> 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.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_07_onclick.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_08_onclick.html

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.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_09_onfocus.html

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.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_10_onkeydown.html

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.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_11_onkeypress.html

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 www.quirksmode.org/js/keys.html . 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.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_12_onkeyup.html

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.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_13_onload.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_14_onload.html

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.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_15_onmousedown.html

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.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_16_onmouseup.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_17_onmousedown_up.html

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 <div> and </div> 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!

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_18_onmouseover.html

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).

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_19_onmouseout.html

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.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_20_onreset.html

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.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_21_onsubmit.html

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 ;->

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_22_onunload.html

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 = "http://www.yahoo.com";var b1 = document.getElementById("btn1");b1.addEventListener('click', function() { window.location = page1;}, false);

http://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_ael_method_01.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_14/eh_ael_method_02.html

34

Event Handling Links of Interest

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

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.

ICE 10