We want the user to click the button to change the text content of the p.
Let’s start with a very basic example that consists of a button element and a p element. To begin learning about event handlers, we’ll first consider the inline event handler. We will go over all three methods to ensure that you are familiar with each way an event can be triggered, then discuss the pros and cons of each method. There are three ways to assign events to elements: These are called a click event or a keypress event, respectively.Īn event handler is a JavaScript function that runs when an event fires.Īn event listener attaches a responsive interface to an element, which allows that particular element to wait and “listen” for the given event to fire. When a user clicks a button or presses a key, an event is fired. By learning about events, you’ll be able to make a more interactive web experience for end users. We’ll also go over three different ways to write code to handle events, and a few of the most common events. In this article, we will go over event handlers, event listeners, and event objects.
By learning about events, we will understand how to tie everything together to make interactive websites.Įvents are actions that take place in the browser that can be initiated by either the user or the browser itself. 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.Īlthough 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.