![]() |
VOOZH | about |
In the Understanding the DOM series, we have discussed the DOM tree and how to access, traverse, add and remove, and modify nodes and elements using the Developer Tools Console.
Although at this point we can now make almost any change we want to the DOM, from a user perspective it is not very helpful because we have only manually triggered changes. By learning about events, we will understand how to tie everything together to make interactive websites.
Events are actions that take place in the browser that can be initiated by either the user or the browser itself. Below are a few examples of common events that can happen on a website:
By coding JavaScript responses that execute upon an event, developers can display messages to users, validate data, react to a button click, and many other actions.
In this article, we will go over event handlers, event listeners, and event objects. Weβll also go over three different ways to write code to handle events, and a few of the most common events. By learning about events, youβll be able to make a more interactive web experience for end users.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
The Document Object Model, usually referred to as the DOM, is an essential part of making websites interactive. It is an interface that allows a programming language to manipulate the content, structure, and style of a website. JavaScript is the client-side scripting language that connects to the DOM in an internet browser.
Browse Series: 8 tutorials
JavaScript is a high-level, object-based, dynamic scripting language popular as a tool for making webpages interactive.
Browse Series: 37 tutorials
Software engineer and open source creator
Community and Developer Education expert. Former Senior Manager, Community at DigitalOcean. Focused on topics including Ubuntu 22.04, Ubuntu 20.04, Python, Django, and more.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
These tutorials are absolutely perfect in showing what JavaScript is all about. I now understand the DOM and how JavaScript can interact with it to make my web pages more dynamic! Thank you. this was a great ride!
Great explanation for the DOM. Thank You.
A short time very well invested. Thank you!
These tutorials are the clearest and most accessible I have found, and in my experience the most efficient. This series has consolidated concepts I had come across previously in various fragments. Iβve learned a lot in a short time. Thank you very much.
Thank you for this beautiful explanation. Harry
Great tutorial! Really helpful :)
Great explanations.
It would be great to differentiate between browser events and JS events. They are different conceptually though work very similarly. Also a providing concepts around pure JS events, e.g. on the server using Node.js would also help to visualize how JS events work.
To summarize, client-side events in JavaScript are interactions that happen within the userβs browser and are handled using JavaScript code executed in the browser. Server-side events, often facilitated by WebSockets, involve events sent from the server to the client to provide real-time updates or notifications.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.