JS DOM - 03.01 - Events

Manipulating DOM dynamically or on demand

Events

An event is a signal that something has happened. All DOM nodes generate such signals. Using js we can make the webpage listen and react to these events.

List of the most useful DOM events:

[[4.1 Mouse Events|Mouse events:]]

• click – when the mouse clicks on an element (touchscreen devices generate it on a tap).
• contextmenu – when the mouse right-clicks on an element.
• mouseover / mouseout – when the mouse cursor comes over / leaves an element.
• mousedown / mouseup – when the mouse button is pressed / released over an element.
• mousemove – when the mouse is moved.

Keyboard events:

• keydown and keyup – when a keyboard key is pressed and released.

Form element events:

• submit – when the visitor submits a <form>.
• focus – when the visitor focuses on an element, e.g. on an <input>.

Document events:

• DOMContentLoaded – when the HTML is loaded and processed, DOM is fully built.

CSS events:

• transitionend – when a CSS-animation finishes.

DOM Events

These allow js to add eventListener or eventHandler to HTML elements.

Here in HTML, onclick is the event listener and myFunction() is the event handler

<button onclick="myFunction()">CLick Me</button>
<button onclick="alert('hello')">CLick Me</button>

In this JS, click is the event listener and myFunction is the event handler

button.addEventListener("click", myFunction);

Explanation on other Events like click, dbclick, keydown, keyup

Other Events

• JavaScript events
• Page load events
• Mouse events
• Keyboard events
• Event delegation
• The dispatchEvent method
• Custom events

Callback

A callback is simply a function that is passed into another function as an argument. When we pass in alertFunction() or function(e){..} as an argument to addEventListener this is a callback.

btn.addEventListener("click", function(e) {
	console.log(e.target)
});

btn.addEventListener("click", function(e) {
	e.target.style.background = "blue";
});

The e parameter in that call back function contains an object that references the event itself. within that object you have access to many useful properties and methods(functions that live inside an object) such that which mouse button or key was pressed, or information about the even’s target- the DOM node that was clicked. [[3.2 Event handlers#Event object|Event Object]]

Additional resources

• Eloquent JS - DOM
• Eloquent JS - Handling Events
• DOM Enlightenment
• Plain JavaScript is a reference of JavaScript code snippets and explanations involving the DOM, as well as other aspects of JS.
• This W3Schools article offers easy-to-understand lessons on the DOM.
• JS DOM Crash Course is an extensive and well explained 4 part video series on the DOM by Traversy Media.
• Understanding The Dom is an aptly named article-based tutorial series by DigitalOcean.
• Introduction to events by MDN covers the same topics you learned in this lesson on events.
• Wes Bos’s Drumkit JavaScript30 program reinforces the content covered in the assignment. In the video you will notice that a deprecated keycode keyboard event is used, replace it with the recommended code keyboard event and replace the data-key tags accordingly.
• Event Capture, Propagation and Bubbling video from Wes Bos’s JavaScript30 program.
• Understanding Callbacks in JavaScript for a more in-depth understanding of callbacks.