Apr 27, 2020
In Any Event- DOM Events
What are events? Its when something happens. You know this from outside the world of programming. Wedding events are when people get married, concert events are when music is played, etc.
DOM Events are very similar. They happen when something happens in the DOM. In JavaScript, events are objects. These objects, depending on the event, have their own attributes and functions which can help get further information about the event.
Events can be standard like click which are common to all browsers or browser-specific. They fall into a variety of categories from resource events, network events, form events, and many more!
In class we have used some basic ones such as click, keydown, submit but, I started to wonder how many other events were out there. Well… there's tons and tons and tons! Check out the link in the resources for an event map that shows a list of them based on the browser and other configurations. So, there is no way I'll be able to talk about them all! Also, did you know you can make your own events!? Well that was quite the turn of events… Check out the reference at the end to see how.
What is Bubbling?
While doing my research on different events I kept running into the term “bubbling”. Very cute, but what does it mean in terms of events? It’s quite simple:
When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.- https://javascript.info/bubbling-and-capturing
This process of running all the handlers from the innermost element all the way up to document is called bubbling. For example, if you have a click event on a p tag, that is nested inside a div tag with its own event handler for click, then the p tag event handler will run first, then the div.
And now for the main event… some more information on a few types of events. From a list of standard events I randomly some I was curious about:
Type: Mouse Events
Examples: mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup
These events have to do with the pointing device on the DOM, which is usually a mouse. The mouse may have been clicked twice on an element, pressed on an element, moved onto, off, over the element, and many more!
Click-related events have the property of which. This lets you know which button on the mouse was clicked. (Note: This is not used for the click event because it only happens on left-click). The values possible for which are:
event.which == 1– the left buttonevent.which == 2– the middle buttonevent.which == 3– the right button
Mouse events also come with coordinates like, clientX and clientY (Window-relative) and pageXand pageY (Document-relative) which gives further information on where the event has taken place.
Type: Form Events
Examples: submit, change, select, input, copy, cut, paste
The most important event for a form will be submit. It will let you know when the form has been submitted by either clicking on the submit button or by pressing Enter on an input field. Both will trigger the submit event because pressing Enter will trigger a click event on your submit button!
Additionally, with forms, there are events that deal with data updates:
- Text Field: The change event can let you know when an element has finished changing. For forms this can mean the user has finished typing in the text field and has clicked elsewhere.
- Checkbox/Radio Input: The select event can let you know when a user has made a selection on your form or if the selection has changed.
- The event input is triggered when a value in the form has been modified in any way. Additionally, this event is triggered after the value is modified and therefore
event.preventDefault()cannot be used as it is too late! - Lastly for form data, there are the cut, copy, and paste events. They are part of the ClipboardEvent class and using
event.clipboardDatayou can access the value that was cut, copied, or pasted. You can also use these events to prevent users from doing these actions on your forms.
Type: Document and Resource Loaded
Examples: DOMContentLoaded, load, unload, beforeunload
In class, we use DOMContentLoaded as an event frequently. Yet there are some other events also related to different parts of the HTML lifecycle on a page:
- DOMContentLoaded: this occurs when the HTML has loaded and the DOM tree is available. It occurs after scripts are read (unless deferred). It does not wait for external resources like pictures
<img>and stylesheets to load (unless we have a script after the style ). - Load: this event is triggered on the window and it occurs when not only all HTML is loaded but also all external resources such as images and styling. This event isn't very frequently used since it's rare you will need to wait this long.
- Beforeunload: this occurs when the user is leaving by navigating away or closing the window. At this time, the document is still visible, and unload is cancelable by asking for confirmation (useful for unsaved changes). Your one last chance to keep the user…
- Unload: this is the final event, the user has almost left but we can still do things such as send out analytics on how the page was used. We cannot at this stage interact with the user or cause any further delays. The user wants out!
Type: UI
Examples: scroll, select, error, resize
UI events are triggered by the user interface and this can be related to how the interface is presented or how the user interacts with the interface.
Scroll is one I've seen used on many websites. It is triggered when the document view or an element has been scrolled. This can be useful if you want to show/hide additional information and to load data sequentially. Like mouse events, scroll comes scrollX and scrollY which gives you information on how much the user has moved.
Others include select, which is triggered when some text is being selected. You could then even access the selected portion of the text. Error is triggered when a resource has failed to load. Additionally, you could use resize to trigger when the document view has been resized.
Type: HTML Media
Examples: play, pause, playing, ended, durationchange, timeupdate, ratechange, volumechange, loadeddata, suspend
Your webpage may have some embedded HTML media using the tags <audio> and <video> . There are a variety of events that can be used on these including:
- if the media is playing, paused, ended or media playback has stopped because of a temporary lack of data
- if the duration, time or rate attribute on you media has been updated or if the volume has changed
- if the first frame of the media has finished loading or the Media data loading has been suspended
References:
Event Map
Making Your Own Event:
Others:
