Events
- Actions or Occurrences that happen in the system or your application, which the system tells you about so you can respond.
- When the user takes an action, like click a mouse button, the Operating System “screams” out to any application that is interested that the event occurred.
- Applications that are interested in that event register an Event Listener that “hears” the event and allows the program to take action.
Web Events
- When a user takes an action in the browser window, the browser raises an event letting the application running it know that the event occurred.
- Everything the user does raises some sort of event, or sometimes multiple events, allowing the programmer to choose what events they care about and what actions they want to take in response.
- Many of the actions the browser or HTML elements take are also raised as events that can be handled.
Event Handling
The receipt of an event at some event handler that was raised by an event producer. The event producer raises the event (the user clicked on a button), the event handler receives the event and forwards it to a callback function, which is a function in our code that will react to the event. Event handling is managed in JavaScript not CSS or HTML.
Event Handler
- Code in our JavaScript that reacts when an event occurs.
- A callback function that will be called by the Event Listener, which what “hears” the event, when the event occurs (usually an anonymous function),
includes an optional parameter to receive the Event Object.
Event Object
An object that is passed to the event handler callback function that details the event the Target: what was the focus of the event (example: what the user actually clicked on) the event’s location mouse events: includes which mouse was a button was used keyboard: which key was pressed. Each event type has an event object with information unique to that event.
Event Listeners
This tells the browser that we are interested in the event and want to react to it.
When the EventListener a callback method is provided. When the EventListener is informed that the event has occurred it will call our callback method. In JavaScript, we provide a callback method as an anonymous function that we pass to the event listener when we create it.
DOMContentLoaded
Is raised on the document when the HTML has been fully loaded into the DOM and is ready for manipulation all functionality (not variable declarations) that is not in a Function should be only run once this event has been raised functions should be declared outside of this event. Many example show to use the load event, but that does not guarantee the DOM has been created, so always use DOMContentLoaded to verify the page is ready to be manipulated by JavaScript.
Event Propagation
- When an event is raised on a DOM element every parent of that element is also notified.
- 3 Phases:
- Capture phase
- Target phase
- Bubble phase - Can stop propagation by calling: stopPropagation() on the event object
Event Propagation Capture phase
Starts at the document and notifies every element in the hierarchy until it reaches the target element - off by default but can be enabled
Event Propagation Target phase
The target element (for example the button the user clicked on) is notified of the event - always is included
Event Propagation Bubble phase
Starts at the target and notifies all of the parents in the hierarchy of the target - this is the default for the browser event handler
DOMContentLoaded
- Is raised on the document when the HTML has been fully loaded into the DOM and is ready for manipulation.
- All functionality (not variable declarations) that is not in a Function should be only run once this event has been raised functions should be declared outside of this event.
- Many example show to use the load event, but that does not guarantee the DOM has been created, so always use
- DOMContentLoaded to verify the page is ready to be manipulated by JavaScript.
