Scribd
Upload
30 views

Event and Event Handling (1)

Uploaded by

Shiv Shankar Choudhary
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

Event and Event Handling (1)

Uploaded by

Shiv Shankar Choudhary
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Event and Event Handling

What are Events?

In JavaScript, events are actions or occurrences that happen in the browser, often triggered by the user or
the browser itself. Examples include:

● Clicking a button (click event)


● Typing into an input field (input or keypress event)
● Moving the mouse (mousemove event)
● Submitting a form (submit event)
● Loading a webpage (load event)

Events are the foundation of interactivity in web applications.


What is Event Handling?
● Event handling is the process of using JavaScript to capture and respond to these events.
● When an event occurs, you can execute custom code to perform specific actions.

1. Inline Event Handling

Add event handlers directly to the HTML element using attributes like onclick, onmouseover, etc.

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


2. Using DOM Properties

Assign an event handler function to a property of the element in JavaScript.

<button id="myButton">Click Me</button>

<script>

const button = document.getElementById('myButton');

button.onclick = function () {

alert('Button clicked!');

};

</script>
3. Using addEventListener (Recommended)

Attach an event listener to an element for better flexibility and the ability to add multiple listeners.

html
Copy code

<button id="myButton">Click Me</button>

<script>

const button = document.getElementById('myButton');

button.addEventListener('click', function () {

alert('Button clicked!');

});

</script>
What are EventListener
An event listener in JavaScript is a method that listens for an event (e.g., click, keypress, mouseover) to occur on a specified element,
and executes a function (called a handler) when that event occurs.

Event listeners allow developers to make web pages interactive by responding to user actions.

Key Methods to Add Event Listeners

1. addEventListener()
○ The most common and flexible way to add event listeners.

Syntax:
element.addEventListener(eventType, handlerFunction, options);
Parameters:

● eventType: The name of the event (e.g., "click", "keydown", "mouseover").


● handlerFunction: The function to execute when the event occurs.
● options (optional): An object to specify event behavior (e.g., { once: true }).
Common Event Types
Mouse Events:

● click: When the user clicks on an element.


● dblclick: When the user double-clicks an element.
● mouseover: When the mouse hovers over an element.

Keyboard Events:

● keydown: When a key is pressed.


● keyup: When a key is released.
● keypress: When a key is pressed down.

Form Events:

● submit: When a form is submitted.


// Add a submit event listener to the form
<body>
form.addEventListener('submit', function(event) {
<h2>Form Submit Example</h2>
// Prevent the default form submission behavior
<form id="myForm">
event.preventDefault();
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name"
// Get the value of the name input field
placeholder="Your name" required>
const name =
<button type="submit">Submit</button>
document.getElementById('name').value;
</form>
<p id="message"></p>
// Validate the input
if (name.trim() === "") {
<script>
message.textContent = "Name cannot be empty!";
// Get the form and message elements
message.style.color = "red";
const form =
} else {
document.getElementById('myForm');
message.textContent = `Hello, ${name}! Your form
const message =
was submitted successfully.`;
document.getElementById('message');
message.style.color = "green";
}
});
</script>
</body>
Event Object Properties

Some common properties of the event object include:

● type: The type of event (e.g., click, submit, etc.).


● target: The element that triggered the event.
● code :refers to the physical key on the keyboard, not the character it produces.
● key: The key pressed (for keyboard events).
Why Pass event to the Function?

The event object provides a powerful way to:

● Understand what happened (e.g., what was clicked, what key was pressed).
● Control the behavior (e.g., stop propagation or prevent default actions).
● Add flexibility to your event handling code.

By passing event, you gain full control over the interaction between the user and the web page!

You might also like