An event is a signal that is generated by the browser or by the user, indicating that something has happened. Events can be triggered by a variety of actions, such as clicking a button, scrolling the page, typing on the keyboard, or resizing the window.
JS can react to events by listening for them and executing a set of instructions, known as an event handler or callback function, when the event occurs. The event listener is attached to an element in the web page, such as a button or a form field, and waits for the associated event to be triggered.
There are several ways to add event listeners in JS, including the addEventListener() method, which is a preferred method for adding multiple event listeners to an element. Consider an example of using addEventListener() to listen for a button click event and execute a function when the button is clicked:
The addEventListener() method is called on the button element and passed two arguments: the name of the event to listen for (‘click’) and a function to execute when the event occurs. The function takes an event object as its argument, which contains information about the event that was triggered.
JS can also react to events by manipulating the DOM (Document Object Model), which is a tree-like structure that represents the HTML elements in a web page. By changing the properties or attributes of an element in response to an event, JS can update the content or appearance of the page dynamically.
Consider another example of using JS to change the text of a paragraph element when a button is clicked:
The JS code can use the querySelector() method to get references to the button and paragraph elements by their IDs, and then attach a click event listener to the button that changes the text of the paragraph element when the button is clicked.
In summary, JS can react to events in a variety of ways, such as by executing a function, manipulating the DOM, or making AJAX requests to the server. Event handling is a fundamental concept in JS and is essential for creating responsive and interactive web applications.