JavaScript Events

What Are Events?

Events are things that happen on a webpage. When you click a button, type in a box, or scroll the page - those are all events.

Think of it like this:

``` ┌─────────────────────┐ │ You click button │ │ (User action) │ └──────────┬──────────┘ │ ┌───────────▼───────────┐ │ Browser notices │ │ "A click happened!" │ └──────────┬─────────────┘ │ ┌───────────▼───────────┐ │ JavaScript runs │ │ (Your code) │ └───────────────────────┘ ```

JavaScript can "listen" for these events and do something when they happen. That's how buttons work, forms submit, and pages respond to what you do.

Common Events You'll Use

- **click** - When someone clicks something - **input** - When someone types in a text field - **submit** - When someone submits a form - **load** - When the page finishes loading - **scroll** - When someone scrolls the page - **mouseover** - When the mouse moves over something - **keydown** - When someone presses a key

Your First Event Listener

Let's make a button that does something when clicked:

**Step 1:** Get the button ```javascript const button = document.getElementById('myButton'); ```

**Step 2:** Tell JavaScript to listen for clicks ```javascript button.addEventListener('click', function() { alert('Button was clicked!'); }); ```

**What happens:** 1. JavaScript finds the button 2. It "listens" for clicks on that button 3. When you click, it runs the function 4. An alert appears

How addEventListener Works

Let's break down `addEventListener`:

```javascript button.addEventListener('click', function() { console.log('Clicked!'); }); ```

**The parts:** 1. **`button`** - The element to listen to 2. **`addEventListener`** - The method that sets up listening 3. **`'click'`** - What event to listen for 4. **`function() { ... }`** - What to do when it happens

Real Example: Form Validation

Let's say you have a form and want to check if the email is valid:

```javascript const emailInput = document.getElementById('email'); const submitButton = document.getElementById('submit');

submitButton.addEventListener('click', function() { const email = emailInput.value; if (email.includes('@')) { alert('Email looks good!'); } else { alert('Please enter a valid email'); } }); ```

**What happens:** 1. User types email 2. User clicks submit button 3. JavaScript checks if email has '@' 4. Shows appropriate message

Listening for Typing

You can also listen for when someone types:

```javascript const input = document.getElementById('myInput');

input.addEventListener('input', function() { console.log('User is typing:', input.value); }); ```

This runs every time the user types a character. Useful for live search or character counters.

The Event Object

When an event happens, JavaScript gives you information about it:

```javascript button.addEventListener('click', function(event) { console.log(event.target); // The element that was clicked console.log(event.type); // 'click' console.log(event.timeStamp); // When it happened }); ```

The `event` object has lots of useful information about what happened.

Preventing Default Behavior

Sometimes you want to stop the normal behavior. Like preventing a form from submitting:

```javascript const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) { event.preventDefault(); // Don't submit the form yet // Do your own validation first }); ```

`preventDefault()` stops the browser from doing its default action.

Real Example: Interactive Counter

Let's build a simple counter:

```html <button id="increment">+</button> <span id="count">0</span> <button id="decrement">-</button> ```

```javascript let count = 0; const countDisplay = document.getElementById('count'); const incrementBtn = document.getElementById('increment'); const decrementBtn = document.getElementById('decrement');

incrementBtn.addEventListener('click', function() { count = count + 1; countDisplay.textContent = count; });

decrementBtn.addEventListener('click', function() { count = count - 1; countDisplay.textContent = count; }); ```

**What happens:** 1. Click + button → count goes up, display updates 2. Click - button → count goes down, display updates 3. The page updates instantly without refreshing

Quick Tips

1. **Always find the element first** - You can't listen to something that doesn't exist 2. **Use descriptive function names** - Makes debugging easier 3. **Test your events** - Make sure they actually fire when you expect 4. **One listener per element is fine** - You can add multiple listeners to the same element

Events are what make websites interactive. Without them, buttons wouldn't work, forms wouldn't submit, and pages would be static. With events, you can build websites that respond to everything the user does.