JS Events
JS Events
In JavaScript, an event is an action that occurs in the browser, such as a user clicking a button, scrolling the page, or submitting a form. JavaScript allows you to capture and respond to events using event handlers, which are functions that are executed when an event occurs.
Here’s an example of how to add an event handler to a button element in JavaScript:
<button
id="myButton">Click me</button>
let button =
document.getElementById("myButton");
button.addEventListener("click",
function() {
console.log("Button clicked!");
});
This code adds
an event listener to the button element with an ID of “myButton”.
When the button is clicked, the function passed to addEventListener() is
executed and the message “Button clicked!” is printed to the console.
There are many
different types of events that can occur in a browser, including mouse events,
keyboard events, and touch events. In addition to adding event handlers
directly to HTML elements, you can also use JavaScript to add event listeners
to the document or window objects to capture events that occur outside of a
specific element.
document.addEventListener("DOMContentLoaded",
function() {
console.log("Page loaded!");
});
This code adds an event listener to the document object that listens for the “DOMContentLoaded” event, which occurs when the page has finished loading. When this event occurs, the function passed to addEventListener() is executed and the message “Page loaded!” is printed to the console.
Understanding how to work with events is an important part of writing interactive and responsive web applications in JavaScript.