An event is an action that occurs on a web page, such as a click, hover, keypress, or form submission. JavaScript allows us to handle these events and execute code when they occur.

Types of Events in JavaScript

Here are some common events used in javascript, 

Ways to Handle Events in JavaScript

Here are several ways to handle the events in javascript that are as given,

Inline Event Handling (Not Recommended)

You can add event handlers directly to HTML attributes.

<button onclick="alert('Button clicked!')">Click Me</button>

Note: This is not recommended as it clutters the HTML and makes it harder to manage.

Using JavaScript onclick Property

<button id="btn">Click Me</button>
<script>
   document.getElementById("btn").onclick = function() {
       alert("Button clicked!");
   };
</script>

Note: Simple but only one event handler can be assigned per event.

Using addEventListener() (Best Practice/Recommended Approach)

Allows for multiple event handlers and better control.

<button id="btn">Click Me</button>
<script>
   document.getElementById("btn").addEventListener("click", function() {
       alert("Button clicked!");
   });
</script>

Syntax:

element.addEventListener(event, function, useCapture);

• event → event name (for example, "click")
• function → function to execute
• useCapture (optional) → true for event capturing, false for bubbling (default)

Event Object (event)

When an event occurs, an event object (event) is automatically passed to the event handler.

<button id="btn">Click Me</button>
<script>
   document.getElementById("btn").addEventListener("click", function(event) {
       console.log(event.type);  // "click"
       console.log(event.target); // The button element
   });
</script>

Preventing Default Behavior (preventDefault())

Some events have default behaviors (e.g., form submissions, links). We can prevent them using event.preventDefault().

<a href="https://google.com" id="link">Go to Google</a>
<script>
   document.getElementById("link").addEventListener("click", function(event) {
       event.preventDefault();  // Prevents navigation
       alert("Default action prevented!");
   });
</script>

Stopping Event Propagation (stopPropagation())

If you want to stop an event from bubbling up or being captured down, use event.stopPropagation() .

<div id="outer">
   <button id="inner">Click Me</button>
</div>
<script>
   document.getElementById("inner").addEventListener("click", function(event) {
       alert("Button clicked!");
       event.stopPropagation();  // Stops propagation to parent
   });
   document.getElementById("outer").addEventListener("click", function() {
       alert("Div clicked!");
   });
</script>

Clicking the button only fires its event, not the div.

Keyboard Events (keydown, keyup)

<input type="text" id="textBox">
<script>
   document.getElementById("textBox").addEventListener("keydown", function(event) {
       console.log("Key pressed: " + event.key);
   });
</script>

Mouse Events (mouseover, mouseout)

<div id="box" style="width:100px; height:100px; background:lightblue;"></div>
<script>
   document.getElementById("box").addEventListener("mouseover", function() {
       this.style.background = "red";
   });
   document.getElementById("box").addEventListener("mouseout", function() {
       this.style.background = "lightblue";
   });
</script>

Form Events (change, submit)

<form id="myForm">
   <input type="text" id="name">
   <button type="submit">Submit</button>
</form>
<script>
   document.getElementById("myForm").addEventListener("submit", function(event) {
       event.preventDefault();
       alert("Form submitted!");
   });
</script>

Event Delegation (Efficient Event Handling)

Instead of adding event listeners to multiple elements, add one listener to a common parent.

<ul id="list">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>
<script>
   document.getElementById("list").addEventListener("click", function(event) {
       if (event.target.tagName === "LI") {
           alert("You clicked: " + event.target.innerText);
       }
   });
</script>

Note: Efficient for dynamically added elements.

I hope you understand clearly about event handling in javascript.

Thanks.

Also, read:  Explain the JavaScript object