Cheatsheets / Building Interactive JavaScript Websites

DOM Events with JavaScript

.addEventListener()
The .addEventListener() method attaches an event eventTarget.addEventListener("event",
handler to a specific event on an event target. The
eventHandlerFunction);
advantage of this is that you can add many events to the
event target without overwriting existing events. Two
arguments are passed to this method: an event name as a
string, and the event handler function. Here is the syntax:

.removeEventListener()
We can tell our code to listen for an event to fire using the eventTarget.addEventListener("event",
.addEventListener() method. To tell the code to stop
eventHandlerFunction);
listening for that event to fire, we can use the
.removeEventListener() method. This method takes
the same two arguments that were passed to eventTarget.removeEventListener("event",
.addEventListener() , the event name as a string and
eventHandlerFunction);
the event handler function. See their similarities in syntax:

Event handler
When an event fires in JavaScript (such as a keystroke or
mouse movement), an event handler runs in response.
Each event handler is registered to an element,
connecting the handler to both an element and a type of
event (keystroke, eg.). A method called an event listener
“listens” for an event to occur, specifies what should
happen as a response, and calls the event handler.

Event object
Event handler functions are passed an argument called an
event object, which holds information about the event
that was fired.
Event objects store information about the event target,
the event type, and associated listeners in properties and
methods. For example, if we wanted to know which key
was pressed, the event object would store that
information.
Keyboard events
Keyboard events describe a user interaction with the
keyboard. Each event describes a separate interaction
with a key on the keyboard by the user, which are then
stored with the .key property.
keydown events are fired when the key is first
pressed.
keyup events are fired when the key is released.
keypress events are fired when the user presses
a key that produces a character value (aka is not a
modifier key such as CapsLock).

javascript event
On a webpage, a trigger such as a user interaction or // An event is triggered when a user
browser manipulation can cause a client-side JavaScript
clicks on the #button element,
event to be created. Events can be used to manipulate
the DOM by executing a JavaScript function. // which then sets the #button element's
Events can include anything from a click to hovering a background-color to blue.
mouse over an element to a webpage loading or being
$('#button').on('click', event => {
refreshed. Events are defined as a part of the JavaScript
API built into the web browser. $(event.currentTarget).css('background-
color', 'blue');
});

JS Event Handlers
The goal of JavaScript is to make a page dynamic, which //Assuming there is an element with
frequently means responding to certain events (for
ID='test' on the page
example, button clicks, user scrolls, etc). DOM elements
can have functions hook onto events. The functions are
called event handlers and the DOM element is known as document.getElementById('test').onclick =
an event target.
function(e) {
The example code block shows how to register a function
as an event handler. The property name for event alert('Element clicked!');
handlers starts with ‘on’ with the event appended };
afterwards. Examples: onload , onclick , onfocus ,
onscroll .

Mouse events
A mouse event fires when a user interacts with the
mouse, either by clicking or moving the mouse device.
click events are fired when the user presses and
releases a mouse button on an element.
mouseout events are fired when the mouse
leaves an element.
 mouseover events are fired when the mouse
enters an element’s content.
mousedown events are fired when the user
presses a mouse button.
mouseup events are fired when the user
releases the mouse button.

Save Print Share