Scribd
Upload
19 views7 pages

DOM Manipulation Event Handling Essentials 1737451700

The document provides essential JavaScript tips focused on event handling, including adding and removing event listeners, and methods like stopPropagation and preventDefault. It lists various event types such as mouse, keyboard, form, window, document, and touch events, along with their explanations. The document concludes with a note encouraging users to save the information for future reference.

Uploaded by

kahal.engineer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views7 pages

DOM Manipulation Event Handling Essentials 1737451700

The document provides essential JavaScript tips focused on event handling, including adding and removing event listeners, and methods like stopPropagation and preventDefault. It lists various event types such as mouse, keyboard, form, window, document, and touch events, along with their explanations. The document concludes with a note encouraging users to save the information for future reference.

Uploaded by

kahal.engineer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

JavaScript tips

JavaScript
Dom Manipulation
4
Event Handling
Essentials

Slim toumi
Slim toumi
JavaScript tips

Adding Event
Listeners

Explanation : addEventListener is a method in JavaScript that enables you


to listen for a specific event on a DOM element.

Note : It is crucial to replace eventName in your JavaScript code


with the specific event you intend to capture,
as detailed on the subsequent page.

Slim toumi
Slim toumi
JavaScript tips

Event Name Explanation

Mouse Events
click Occurs when the element is clicked.
dblclick Occurs when the element is double-clicked.
mousedown Occurs when the mouse button is pressed over an element.
mouseup Occurs when the mouse button is released over an element.
mousemove Occurs when the mouse pointer moves over an element.

Keyboard Events
keydown Occurs when a key on the keyboard is pressed down.
keyup Occurs when a key on the keyboard is released.
Form Events
submit Occurs when a form is submitted.
change Occurs when the value of an input element changes.
focus Occurs when an element gets focus.
blur Occurs when an element loses focus.

Window Events
load Occurs when a page has finished loading.
unload Occurs when the user leaves the page.
resize Occurs when the browser window is resized.
scroll Occurs when the user scrolls in the window.

Document Events
DOMContentLoaded Occurs when the document has been completely loaded and parsed.
readystatechange Occurs when the readyState of the document changes.
Touch Events
touchstart Occurs when a touch point is placed on the touch surface.
touchend Occurs when a touch point is removed from the touch surface.
touchmove Occurs when a touch point is dragged across the touch surface.
Custom Events You can also create and dispatch custom events using
the CustomEvent constructor.

Slim toumi
Slim toumi
JavaScript tips

Removing Event
Listeners

Explanation : removeEventListener method is used to remove a previously


added event listener from a DOM element.

Slim toumi
Slim toumi
JavaScript tips

Stop Propagation

Explanation : stopPropagation is a method used within an event handler


to prevent the event from propagating or bubbling
up or down the DOM hierarchy

Slim toumi
Slim toumi
JavaScript tips

Default Action
Suppression

Explanation : preventDefault is a method used within an event handler to


suppress or prevent the default action associated with an event.
This is commonly used to stop actions like navigating to a new
page when a link is clicked.

Slim toumi
Slim toumi
JavaScript tips

Hopefully You Found It


Usefull!
Be sure to save this post so you
can come back to it later

like Comment Share

Slim toumi
Slim toumi

You might also like