JavaScript Events

---

What is an Event in JavaScript?

An event is a signal that something has happened — a user action or browser-triggered activity like:

• Clicking a button
• Typing into a form
• Hovering over an element
• Page load or resize
• Form submission

JavaScript listens for these events and lets you run code when they occur.

Common HTML Events

Event Name	Triggered When...
click	An element is clicked
mouseover	Mouse hovers over an element
mouseout	Mouse leaves an element
keydown	A key is pressed
keyup	A key is released
change	Form field value changes
submit	A form is submitted
load	The page or image finishes loading
dblclick	Element is double-clicked

3 Ways to Handle Events

1. Inline Event Handler (in HTML)

<button onclick="sayHello()">Click Me</button>
<script>
  function sayHello() {
    alert("Hello from inline event!");
  }
</script>

2. Internal Event Handler (using DOM)

<button id="btn">Click</button>

<script>
  document.getElementById("btn").onclick = function () {
    alert("Clicked!");
  };
</script>

3. addEventListener() Method

const btn = document.getElementById("btn");

btn.addEventListener("click", function () {
  alert("Event using addEventListener");
});

This is the recommended way — it allows multiple listeners and better separation of HTML and JS.

Mouse Events Example

<div id="box" style="width:100px;height:100px;background:red;"></div>

<script>
  const box = document.getElementById("box");
                                    
  box.addEventListener("mouseover", () => {
    box.style.background = "blue";
  });
                                    
  box.addEventListener("mouseout", () => {
    box.style.background = "red";
  });
</script>

Keyboard Events Example

document.addEventListener("keydown", function (e) {
  console.log("Key pressed:", e.key);
});

You can capture key values like 'Enter', 'Escape', 'ArrowUp', etc.

Form Events Example

<form id="myForm">
  <input type="text" name="username" />
  <button type="submit">Submit</button>
</form>
                                  
<script>
  const form = document.getElementById("myForm");
                                  
  form.addEventListener("submit", function (e) {
    e.preventDefault(); // Prevents actual form submission
    alert("Form submitted via JavaScript!");
  });
</script>

The event Object

You can access event details like type, target element, key pressed, mouse position, etc.

document.addEventListener("click", function (event) {
  console.log(event.type);   // click
  console.log(event.target); // element clicked
});

Removing an Event Listener

function greet() {
  alert("Hello!");
}
                                  
btn.addEventListener("click", greet);
                                  
// Later...
btn.removeEventListener("click", greet);

Note: You must use a named function (not an anonymous one) to remove a listener.

🧪 Practice Exercise:

Task:

1. Add a click event to change the text of a paragraph.
2. Use mouseover and mouseout to animate a box’s color.
3. Create a form that prevents default submission and logs the input value.
4. Display the key a user presses using keydown.
5. Write a function that runs only once on the first button click.