As I’ve continued to navigate the ✨wonderful world of web development✨, my curiosity during everyday browsing has grown immensely. I’ve found myself opening the DevTools in the middle of casually watching a youtube video because I want to know how the comment section is laid out, or admiring the clean functionality of a website I’ve never been to before.
In my experience, one of the core elements of creating a good user experience is HTML DOM events. The best way to bring your site to life is by framing much of your functionality and styling around events.
What are HTML DOM Events??
HTML DOM events allow Javascript to respond to user interaction as it’s happening (i.e. the user clicks on the title of an article in a google search and gets redirected to the article’s address). Although the click event is one of the most commonly used, there are dozens of other events that allow for boundless functionalities.
Some Events and their Functionality
The change event occurs when the content of an input field, checkbox, or selection has changed. This event is useful for updating the DOM according to the change that has been made.
The mouseover event occurs when the user moves the cursor over the selected element. This event is useful for styling and creating a more dynamic website.
The mouseleave event occurs when the user moves the cursor outside of the selected element. The mouseout event occurs when the user moves the cursor outside of the selected element or its child.
The keydown and keypress events occur when the user presses a key on their keyboard. This event is useful for interactive features such as games, or page navigational features such as pressing an arrow key to navigate to the next photo in a post.
The load event occurs when an object has loaded on the DOM. This can be used to delay the display of certain (or all) elements on the DOM until the selected object has loaded.
The animationend event occurs when the selected animation has completed. This event can be used to automatically play a new animation when the previous has completed.
The canplay event occurs when the selected media element has buffered enough to begin playing. The canplaythrough event occurs when the selected media element has buffered completely.
The resize event occurs when the user changes the document view size. This event can be useful for hiding menu bars and adjusting the display based on the window size.
Conclusion
Although this is only a small selection of HTML DOM events, we are able to accomplish amazing things by utilizing them in our code. I highly encourage getting familiar with these events’ syntax as they can add considerable accessibility and functionality to any site.
