Instead, your code will now be executed asynchronously (i.e. some pieces of code will not work when the rest of the surrounding code is being executed, but only when they are explicitly triggered). Who knows what comes first???
An event is something that happens during the runtime of your web application! Such as clicking on a button, pressing a key on the keyboard, hovering a div with your mouse, etc.
Your job as a developer is to prepare for those events and define handler functions - the actions that are going to be handling each event.
Sometimes it is the website user, sometimes it is the browser, sometimes it is another application letting you know something, sometimes the developer triggers events related to the business logic, etc.
There are dozens of events being triggered every minute, but you don’t have to do anything about it (not if you don’t want to). They are available to you depending on the type of application that you want to do.
Here are some of the types of events that are constantly being triggered (and you can listen to them):
|Click||When the user clicks with the mouse or finger in any HTML element.|
|The event occurs when the pointer is moved onto (for mouseover) or outside (for mouseout) an element, or one of its children.|
|contextmenu||When the user right clicks on the mouse.|
|Mousemove||If the user moves the mouse|
|Mousedown or Mouseup||If the user presses or releases the mouse.|
☝ Play with this demo here
|Load||The browser has finished loading the website.|
|Scroll||When the element or window gets scrolled.|
|When the user focuses in a different window/tab; or when the user comes back from a different window/tab.|
|Resize||When the window is resized.|
☝ Play with this demo here
|Submit||The event occurs when a form is submitted.|
|Focusin and Focusout||The event occurs when the pointer is moved onto an element or onto one of the element’s children.|
|Input||The event occurs when an element gets user input.|
|Change||The event occurs when the content of a form element, the selection, or the checked state have changed (for |
☝ Play with this demo here
|Keyup||When the user releases the keyboard key.|
|Keydown||When the user presses the keyboard key.|
|Keypress||When the user presses and releases the keyboard key. The difference from keydown/up is that Keypress only works on character keys. For example, it does not work on the up||down||left||right arrows.|
☝ Play with this demo here
🔗 Here you can find a list with all the other less common events that you have at your disposal. Read them quickly, and be aware of them for future reference during your life as a developer.
Now that you know the main events that exist out there, you can start listening for them during the runtime. The only way to react to any event is by listening for that event and assigning a function that will handle the event however you need.
Let’s repeat: To react you need to listen…. And to listen you need to specify a handler function. We call that construct an Event Listener.
You can add an event listener in 2 different ways:
For example, if you want to start listening when the user clicks on a particular button all you have to do is specify the "onclick" attribute to that specific HTML
<button> tag, like this:
Sometimes the DOM element doesn’t exist from the beginning. Maybe they are created after a database call or after the user did something. To solve that problem, you need to start listening after the new elements are created.
The .addEventListener function is perfect for this because it can be used in any DOM element during runtime.
When using the addEventListener function, you have to specify what event you want to listen to, and the handler function that will be called every time that event is triggered on that DOM element.
For example, the code below is creating a list of names and each LI in it is listening for the "click" event, which then triggers removal of the same LI:
Event handler functions can receive one optional parameter in their declaration, which most developers name event, evt, or simply e. This parameter is always filled with the "Event object" which gets sent by default from every event and contains important information about the event that was triggered, the element where it occured, its value etc.
No matter what type of event (mouse-related, keyboard-related, frame-related), the event object is always going to have at least the following properties:
|Target||Returns the DOM element that triggered the event.|
|Type||The type of event: click, mouseover, load, etc.|
|Cancelable||If you can stop the default action of the event or not.|
|preventDefault()||If the event is cancelable, this method stops the default action of it - for example preventing a "submit" event of a form will result in the form not being submitted which can be useful if the form has errors that need to be corrected etc.|
|stopPropagation()||Stops an event from propagating (i.e. from triggering the same event in nested or parent elements)|
Depending on the type of event, you will have additional properties that will give you very useful information about what happened when the event was triggered.
One of the most important such additional properties is the target.value property of the event objects related to input fields. It allows us to capture and save user input from input elements.
You can do it by passing the 'event' argument in the inline
onchange event's handler function:
Or, you can do it with
Notice that in addEventListener() we only reference the function (
myChangeHandler) and not actually call it (
myChangeHandler()). If you call it, it will automatically run when the page loads and not wait for an event to be triggered, which is highly undesirable. Therefore we do not need to pass the Event object as an argument there (there are no parentheses). The event object is passed automtically by addEventListener to the handler function.
|clientX, clientY||Returns the horizontal or vertical coordinate of the mouse pointer – relative to the current window – when the mouse event was triggered.|
|pageX, pageY||Returns the horizontal or vertical coordinate of the mouse pointer – relative to the document – when the mouse event was triggered.|
|which||Returns which mouse button was pressed when the mouse event was triggered.|
|keyCode||Returns the Unicode character code of the key that triggered the event.|
|shiftKey, altKey or ctrlKey||Returns whether the |
|deltaX, deltaY||Returns the vertical or horizontal scroll amount of a mouse wheel (y-axis) or (x-axis).|
|deltaMode||Returns a number that represents the unit of measurements for delta values (pixels, lines or pages).|
🔗 There is a lot more information you can get from the event object, but we are focusing on the most used properties. For a bigger list of properties please read this guide.
But what if I don’t want to continue listening? All modern browsers remove the events listeners when you delete the DOM element in which they were applied. If you don’t want to delete the DOM element, you can remove the listener manually using the
You have to use the exact same parameters in the removeEventListener function as the ones you used in the addEventListener function.
Here is an example:
In this code, we are adding an event listener to the click event. Afterwards, the first time the click listener gets called, the handler function removes the event listener from the button. That’s why upon the second time the button gets clicked, nothing happens.
The most efficient way to learn: Join a cohort with classmates like yourself, live streamings, coding jam sessions, live mentorships with real experts and keep the motivation.
From zero to getting paid as a developer, learn the skills of the present and future. Boost your professional career and get hired by a tech company.
Start a career in data science and analytics. A hands-on approach with interactive exercises, chat support, and access to mentorships.
Keep your motivation with this 30 day challenge. Join hundreds of other developers coding a little every day.
Start with Python and Data Science, Machine Learning, Deep Learning and maintaining a production environment in A.I.