Skip to content

10 - Events in JavaScript.md

Latest commit

 

History

History
340 lines (209 loc) · 5.38 KB

10 - Events in JavaScript.md

File metadata and controls

340 lines (209 loc) · 5.38 KB
Raw

Events in JavaScript

Introduction

An Event is an action or occurrence that happens in a web browser.

Events can be generated by:

  • Clicking a button
  • Moving the mouse over an element
  • Moving the mouse out of an element
  • Pressing a keyboard key
  • Submitting a form
  • Changing the value of an input field
  • Loading a webpage

JavaScript allows us to respond to these events by executing specific functions.

What is an Event Handler?

An Event Handler is a JavaScript function that is executed automatically when a particular event occurs.

Example:

<button onclick="fun()">Click Me</button>

Here,

  • onclick → Event
  • fun() → Event Handler Function

Example 1: onclick Event

HTML File

Common.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Events in JavaScript</title>

    <script src="events.js"></script>
</head>

<body>

    <button onclick="fun()">Message</button>

    <button onclick="enjoy()">Information</button>

</body>

</html>

JavaScript File

events.js

function fun(){

    alert("Welcome to JavaScript Alert");

}

function enjoy(){

    confirm("Welcome to Confirm");

}

Output

When the user clicks:

Message Button

alert("Welcome to JavaScript Alert");

Output:

Welcome to JavaScript Alert

A popup alert box appears.

Information Button

confirm("Welcome to Confirm");

Output:

Welcome to Confirm

OK      Cancel

A confirmation box appears with:

  • OK Button
  • Cancel Button

alert() Method

The alert() method is used to display a warning or informational message.

Syntax

alert("Message");

Example

alert("Welcome to JavaScript");

confirm() Method

The confirm() method displays a confirmation dialog box.

Syntax

confirm("Are you sure?");

Output

Are you sure?

OK     Cancel

It returns:

  • true → If OK is clicked
  • false → If Cancel is clicked

Example 2: Mouse Events

HTML File

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Event</title>

    <script src="events.js"></script>

</head>

<body>

    <button onclick="fun1()">OnClick</button>

    <button onmouseover="fun2()">OnMouseOver</button>

    <button onmouseout="fun3()">OnMouseOut</button>

</body>

</html>

JavaScript File

function fun1(){

    alert("Welcome to function1");

}

function fun2(){

    alert("Welcome to function2");

}

function fun3(){

    alert("Welcome to function3");

}

Output

onclick Event

When the button is clicked:

Welcome to function1

onmouseover Event

When the mouse pointer moves over the button:

Welcome to function2

onmouseout Event

When the mouse pointer leaves the button:

Welcome to function3

Common JavaScript Events

Event Description
onclick Triggered when an element is clicked
ondblclick Triggered when double-clicked
onmouseover Triggered when mouse moves over an element
onmouseout Triggered when mouse leaves an element
onkeydown Triggered when a key is pressed
onkeyup Triggered when a key is released
onchange Triggered when input value changes
onsubmit Triggered when a form is submitted
onfocus Triggered when an input gets focus
onblur Triggered when an input loses focus
onload Triggered when page finishes loading

Using addEventListener()

Apart from inline events, JavaScript provides:

addEventListener()

This is the modern way of handling events.

Syntax

element.addEventListener("event", functionName);

Example

<button id="btn">Click Me</button>
document.getElementById("btn")
.addEventListener("click", message);

function message(){

    alert("Button Clicked");

}

Difference Between Inline Events and addEventListener()

Inline Event addEventListener()
Written inside HTML Written in JavaScript
Less maintainable More maintainable
One event at a time Multiple events can be attached
Old approach Modern approach

Important Points

  1. Events are actions performed by the user or browser.
  2. Event Handlers are functions executed when an event occurs.
  3. onclick is triggered when an element is clicked.
  4. onmouseover is triggered when mouse enters an element.
  5. onmouseout is triggered when mouse leaves an element.
  6. alert() displays a popup message.
  7. confirm() displays OK and Cancel buttons.
  8. addEventListener() is the recommended modern way to handle events.

Summary

Events are one of the most important features of JavaScript. They allow developers to create interactive web pages by responding to user actions such as clicks, mouse movements, keyboard actions, and form submissions. Understanding events is essential for DOM Manipulation, Form Validation, and building dynamic web applications using modern JavaScript frameworks.