Skip to content

Latest commit

 

History

History
54 lines (37 loc) · 2.5 KB

events.md

File metadata and controls

54 lines (37 loc) · 2.5 KB
Raw

Events in JavaScript

Events are actions or occurrences that happen in the execution of JavaScript code. They are often triggered by user interactions with a web page, such as mouse clicks, keyboard presses, or changes in the page's state. Handling events allows you to respond to these actions and create interactive and dynamic web applications.

Event Handling

Event handling in JavaScript involves attaching event listeners to elements to respond to specific events. You can use event listeners to execute code when an event occurs, such as when a button is clicked or a form is submitted.

Adding Event Listeners

You can add event listeners to elements using the addEventListener method. This method takes two arguments: the type of event to listen for and the function to execute when the event occurs.

// Add an event listener for a click event
element.addEventListener("click", function() {
    console.log("Element clicked");
});

Removing Event Listeners

You can also remove event listeners from elements using the removeEventListener method. This method requires the same arguments as addEventListener: the type of event and the function to remove.

// Remove an event listener for a click event
element.removeEventListener("click", clickHandler);

Common DOM Events

There are many types of events that can occur in a web browser. Some common DOM events include:

  • click: Fired when a mouse click occurs.
  • mouseover: Fired when the mouse pointer enters the element.
  • keydown: Fired when a key is pressed down.
  • submit:Fired when a form is submitted.
  • load: Fired when the document and all external resources have finished loading.

You can attach event listeners to elements to handle these events and execute custom JavaScript code in response.

Event Object

When an event occurs, JavaScript creates an event object that contains information about the event. This object is passed as an argument to the event handler function and can be used to access details such as the event type, target element, and additional properties specific to the event.

// Event handler function
function handleClick(event) {
    console.log("Element clicked:", event.target);
}

// Add event listener
element.addEventListener("click", handleClick);

In this example, the event parameter represents the event object passed to the handleClick function. You can use properties and methods of this object to perform actions based on the event that occurred.