JavaScript: Events

2h 11mIntermediate2013-09-17

Authors

Ray Villalobos

Senior Staff Instructor at LinkedIn Learning

Course details

Learn about the different types of JavaScript events available to use in your applications, including traditional events like mouse, form, and window events, plus events that allow you to manage the DOM and HTML5 events that deal with media. Author Ray Villalobos shows how to propagate and register events during the capturing and bubbling phases, cancel an event or default behavior, and respond to clicks, mouse-overs, right-clicks, following the mouse, and loading images. Plus, Ray demos an audio jukebox project and a drag-and-drop game that shows JavaScript desktop and touch events in action.

Learning objectives
Understanding event registration and propagation
Analyzing event properties
Creating and removing DOM elements with events
Removing an event
Canceling and preventing default events
Playing media events
Handling media pauses
Dragging and dropping
Adding touch events

Skills covered

JavaScriptOracleProgramming LanguagesSoftware DevelopmentDeep Dive (X:Y)

Concepts

0. Introduction

01 - Introduction
02 - What you should know
03 - Using the exercise files

1. Learning about Events

04 - Understanding event registration
05 - Using events with old browsers
06 - Analyzing event properties
07 - Understanding event propagation
08 - Stopping event propagation
09 - Cancelling default behavior

2. Working with Common Events

10 - Removing DOM elements with events
11 - Cleaning up event issues
12 - Creating DOM elements with events
13 - Removing an event
14 - Preventing default events

3. Working with Time-Based Events

15 - Creating a spinner graphic for large image loads
16 - Playing media events
17 - Monitoring media-ended events
18 - Handling media pauses
19 - Starting a new song

4. JavaScript - Events in Action

20 - What we'll be building
21 - Preparing SVG assets
22 - Setting up our core files
23 - Starting to drag
24 - Dragging and dropping
25 - Dealing with layers
26 - Adding touch events

Conclusion

27 - Next steps