# JavaScript Programming/Events

This lesson introduces JavaScript events.

## Objectives and Skills

Objectives and skills for this lesson include:
* Identify and handle HTML events
** onchange; onmouseover; onload; onclick; onmouseout; onkeydown

## Readings

* Wikipedia: Event (computing)
* Wikibooks: JavaScript/Event handling
* Wikibooks: JavaScript/W3C event handlers

## Multimedia

* YouTube: What are JavaScript Events?
* YouTube: JavaScript Tutorial for Beginners - 33 - Intro to events
* YouTube: JavaScript 2021 Tutorial 9 - Calling functions from events
* YouTube: JavaScript Tutorial for Beginners - 32 - Changing an image
* YouTube: JavaScript Tutorial for Beginners - 34 - The mouseover event
* YouTube: addEventListener - Beau teaches JavaScript
* YouTube: JavaScript Questions: What is Event Delegation, Event Propagation, Event Bubbling?
* YouTube: A Complete Overview of JavaScript Events - All You Need To Know
* Simplilearn: Understand JavaScript Events with Examples

## Examples

* W3Schools: JavaScript Events
* W3Schools: JavaScript HTML DOM Events
* W3Schools: JavaScript HTML DOM Event Listener
* Example Code
* Events

## Activities

Complete the following activities using external JavaScript code. Apply JavaScript best practices, including comments, indentations, naming conventions, and constants. Use input elements for input and respond to input or change events or add buttons and respond to click events. Use HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used.
* Create a program to prompt the user for hours worked per week and rate per hour and then calculate and display their weekly, monthly, and annual gross pay (hours * rate). Base monthly and annual calculations on 12 months per year and 52 weeks per year.
* Create a program that asks the user how old they are in years, and then calculate and display their approximate age in months, days, hours, and seconds. For example, a person 1 year old is 12 months old, 365 days old, etc.
* Review MathsIsFun: US Standard Lengths. Create a program that asks the user for a distance in miles, and then calculate and display the distance in yards, feet, and inches, or ask the user for a distance in miles, and then calculate and display the distance in kilometers, meters, and centimeters.
* Review MathsIsFun: Area of Plane Shapes. Create a program that asks the user for the dimensions of different shapes and then calculate and display the area of the shapes. Do not include shape choices. That will come later. For now, just include multiple shape calculations in sequence.
* Create a program that calculates the area of a room to determine the amount of floor covering required. The room is rectangular with the dimensions measured in feet with decimal fractions. The output needs to be in square yards. There are 3 linear feet to a yard.
* Create a program that helps the user determine how much paint is required to paint a room and how much it will cost. Ask the user for the length, width, and height of a room, the price of a gallon of paint, and the number of square feet that a gallon of paint will cover. Calculate the total area of the four walls as 2 * length * height + 2 * width * height Calculate the number of gallons as: total area / square feet per gallon Note: You must round up to the next full gallon. To round up, use the Math.ceil function. Calculate the total cost of the paint as: gallons * price per gallon.

## Lesson Summary

* Events are actions or occurrences that happen in the system you are programming
* Events occur when the user clicks a button, presses a key on the keyboard, submits a form, resizes the window, etc. JavaScript can detect and react to such events by executing the code.
* Each available event has an event handler, which is a block of code (usually a JavaScript function that you as a programmer create) that will be run when the event fires.
* For a start, it is not a good idea to mix up your HTML and your JavaScript, as it becomes hard to parse — keeping your JavaScript all in one place is better; if it is in a separate file you can apply it to multiple HTML documents.
* Event propagation is a way of defining the element order when an event occurs. If you have one element inside a second element, and the user clicks on the first element, which element's "click" event should be handled first?
* In bubbling the innermost element's event is handled first and then the outer.
* In capturing the outer most element's event is handled first and then the inner
* Data on events can include not only the type of event, but when it occurred and what caused it to occur.

## Key Terms
### DOM (Document Object Model)

    The HTML DOM represents the structure of a web page in a tree-like format, where each element, attribute, and piece of text in the page is represented as a "node." This allows developers to interact with the content, structure, and styles of the web page dynamically.

### event

    A function can be called when an event occurs such as the user clicking on an element. Some other examples of events in JavaScript are mouseover, mouseout, input, and onload.

### event handler

    An event that can be handled is something happening in a browser window, including a document loading, the user clicking a mouse button, the user pressing a key, and the browser screen changing size. When a function is assigned to handle an event type, that function is run when an event of the event type occurs. Examples include "onclick" and "onmouseover"

### event listener

    It is attached to an element and fires a function when the event is detected on the element.

### onchange

    An HTML element has been changed such as a user changing an input field value. (Sometimes still have to hit enter on keyboard to trigger.)

### onclick

    An HTML event when the user clicks an HTML element.

### onkeydown

    An HTML event when the user pushes a keyboard key.

### onload

    The browser has finished loading the page.

### onmouseout

    The user moves the mouse away from an HTML element.

### onmouseover

    An HTML event when the user moves the mouse over an HTML element.

### Touch Event

    A set of HTML events that occur when a user touches a touch-based device.

## See Also

* IdRatherBeWriting: Events and Listeners
* MDN: Event Reference
* W3Schools: Global Event Attributes
* StackOverflow: HTML Event Attributes & Assign Events
* Javascript.info - Introduction to browser events
* MDN: Introduction to events
* Eloquent JavaScript.net: Handling Events
* TutorialRepublic: Understanding Event Listeners
* JavaScript Event Handlers
* geeksforgeeks: JavaScript Events
* Kirupa: Javascript Events
* JavaScript Tutorial: Handling Events in JavaScript
* W3Schools: HTML <input> Tag
* JavaScript Tutorial Input Event
* W3Schools: HTML DOM Event Object
* An Introduction to JavaScript Event Listeners for Web Designers