The actions can be initiated by the user and be as simple as a mouse click, a key press, or a touch gesture. They can even be browser-initiated, such as completing the loading of a particular resource.
There are endless possibilities of applications awaiting you!
What are events?
Let's start with the most basic idea — what exactly is meant by an 'event'?
Well, technically speaking:
As we stated previously, the action can be initiated either by the user or by the browser itself.
In short, whatever the case be, an event is just an action.
Now how many such actions could you think about, that a user or the browser could initiate while he/she is using a web page?
To give you a headstart, the user can press a key on the keyboard, play an audio element, switch to fullscreen mode, and... Try writing all your ideas on a piece of paper.
- Clicking a given element.
- Playing an
- Going to full screen.
- Hovering the mouse pointer over an element.
- Right-clicking on the web page.
- Copying the text inside an
- Scrolling the web page.
- Dragging a file into the web page.
- Changing the hash of the URL.
...and so on.
Each of the actions listed above represents something to which the underlying web page can sensibly respond to.
For instance, when the data inside a password field is copied (let's say by pressing
C), the program could react by denying that action and rather getting the user to manually retype the password in the 'Confirm password' field.
Similarly, when an image is dragged from the OS home page into the browser window, inside a given element, we could react by reading the image file and then displaying a preview of it. This is very common in applications out there.
As another example, when the web page is scrolled beyond a certain point, we could react by sticking a particular within the viewport. This is often referred to as 'sticky positioning' and is also quite common across the web.
Back in time with events
What do you think about this?
The number of events provided in the language during these early times was pretty small, with very few features given to developers while handling them. However, remember that an event loop was used from the very beginning in order to effectively handle these events.
At this point, it's worth noting that the very-first event model used by Navigator 2.0 and Internet Explorer 3 was pretty successful and continues to be supported to date in all browsers. It is regarded as a part of the legacy DOM (recall the legacy DOM from the HTML DOM unit?) and for backwards-compatilibity was also included in the DOM Level 2 standard.
As we shall see in the next chapter, the legacy DOM's event model is really simple to understand and work with. However, at the same time, it has certain downsides due to which a new mechanism of working with events (the
EventTarget interface) was proposed and thereby standardized by W3C in the same DOM Level 2 standard.
Where this gives developer a lot more power and freedom, it also makes the entire events ecosystem increasingly complex. So we, as developers, need to put in the effort to learn the ecosystem the right way and leverage its real potential.
In this unit
It's now time to discuss on what exactly we'll be learning in the subsequent chapters of this unit.
We'll also discover the
EventTarget interface and its two most frequently-used methods
removeEventListener() used to set up event handlers.
EventTarget interface, or the HTML event-handling attributes.
There are mainly two ways of propagation: the legacy capturing and then the more sensible and default approach of bubbling. We'll unravel the working of both these ways in detail in that very chapter.
Once all these basic foundational ideas of events are covered, we'll then start discussing about specific events and how to handle them.
Here, we'll begin with the very basic mouse events, then progressing to keyboard events, then to the scroll event, then to load events and findally ending with URL-based events, in particular the hash change and the popstate events.
After this, we'll dedicate whole units to specific kinds of events by virtue of being extremely complex to handle and work with, in general. These kinds include touch events, form-related events, and drag events.
We'll create numerous programs, ranging from pretty simple to fairly complicated ones, using all of the ideas learnt in the unit and thus make the whole voyage of learning events a joyous one.
So, let's get going.