Microsoft 70-480: Raise and handle an event

Exam Objectives

Handle common events exposed by DOM (OnBlur, OnFocus, OnClick); declare and handle bubbled events; handle an event by using an anonymous function

Quick Overview of Training Materials

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapters 3 and 6

Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 5
Microsoft.com - Exam 70-480 - suggested link: Coding basic apps
MSDN - Objects and Events
MSDN - Understanding the Event Model
MSDN - Use cases for JavaScript Closures
JavaScript Closures from Jibbering.com
MSDN - Cross-browser event handling using plain ole JavaScript

Adding event handlers

There are three basic ways to add event handlers to a DOM element:

• setting the attribute declaratively:
  <button id="mybutton" onclick="function () {console.log("click...");}">Click Me!</button>
• setting the element object property in JavaScript:
  document.getElementById("mybutton").onclick = function () {console.log("click...");};
• using the addEventListener method:
  document.getElementById("mybutton").addEventListener("click",function () {console.log("click...");});

The first two methods can be used to set a single event listener to an element, however the addEventListener() method can add multiple event listeners to a single element, and can add listeners to any DOM element, not just HTML. With this function, you can also specify if an event handler will use the even on the capture phase or the bubble phase.

The most commonly encountered events are:

• Mouse events:
• onmousedown - pressed the mouse button down
• onmouseup - allowed mouse button to raise up
• onclick - single click (down-up)
• ondblclick - double click (down-up-down-up)
• onmouseover - mouse cursor moves over the element
• onmouseout - mouse cursor moves off the element
• onmousemove - user moves the mouse
• Keyboard events: - contain a keyCode property with the key pressed...
• onkeydown - pressed key down
• onkeyup - let key raise up
• onkeypress - full key press (down-up)
• Focus and Selection events -
• onfocus - the element is focused. Placing the cursor in a text input fires this event
• onblur - the element is no longer focused. Tabing out of an element for example.
• onselectstart - fires when the user starts a selection (mousedown)
• onselect - fires when a selection is made (mouseup)
• ondragstart - fires when the user moves the selection box (mousedown + mousemove)
• Other events - 
• onreadystatechange - fired when the state of an XHR object changes states, used in AJAX
• onload - the window object and img elements fire then event when loading is complete (cached images might not fire though [source])
• onunload - fired by window object when the browser is closed
• onchange - fired by mutable elements when their value changes (like an input or select)

Event capture, bubbling,  and stopPropogation()

When an event is triggered on an element, the event begins at the root element and works its way up the tree in a process called capturing.  After the event hits the element that fired it, it moves back down the DOM tree in a process called bubbling.  At any point in this process, an event handler can stop the process by calling .stopPropogation() on the event.

This fiddle demonstrates the process: