JavaScript Events

📘 JavaScript Event Kya Hai?

Hindi: Event ka matlab hai website par hone wala koi action, jaise button click karna, input mein kuch type karna ya form submit karna.

English: An event is an action that happens on a webpage, usually caused by the user or the browser.

💡 Common JavaScript Events

JavaScript mein kuch common events:

click → button ya element par click
mouseover → mouse element ke upar aaye
mouseout → mouse element se bahar jaye
input → input mein value change ho
change → input ki value change hone par
submit → form submit hone par
load → page load hone par

1️⃣ Click Event

Button click hone par JavaScript function run karne ke liye click event use kar sakte hain.

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

<script>

function showMessage(){

    alert("Hello OMI!");

}

</script>

2️⃣ addEventListener()

JavaScript mein events handle karne ka ek professional method addEventListener() hai.

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

<script>

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

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

    alert("Button Clicked!");

});

</script>

3️⃣ Input Event

User input box mein type kare to us action ko detect karne ke liye input event use hota hai.

<input id="nameInput"
placeholder="Enter your name">

<script>

const input =
document.getElementById("nameInput");

input.addEventListener("input", function(){

    console.log(input.value);

});

</script>

4️⃣ Mouseover Event

Jab mouse kisi element ke upar jata hai, tab mouseover event trigger ho sakta hai.

<div id="box">
    Move Mouse Here
</div>

<script>

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

box.addEventListener("mouseover", function(){

    console.log("Mouse is over the box");

});

</script>

5️⃣ Form Submit Event

Form submit hone par JavaScript se event handle kiya ja sakta hai.

<form id="myForm">

    <input type="text"
    placeholder="Your Name">

    <button type="submit">
        Submit
    </button>

</form>

<script>

const form =
document.getElementById("myForm");

form.addEventListener("submit", function(event){

    event.preventDefault();

    alert("Form Submitted!");

});

</script>

6️⃣ Event Object

Event handler ko ek event object mil sakta hai. Is object mein event se related information hoti hai.

button.addEventListener("click", function(event){

    console.log(event);

});

💻 Complete Event Example

Ab button click par webpage ke text ko JavaScript se change karte hain.

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Event</title>

</head>

<body>

<h2 id="message">
    Welcome to OMI
</h2>

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

<script>

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

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

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

    message.textContent =
    "You clicked the button!";

});

</script>

</body>

</html>

🌐 Real Website Mein Events

Professional websites mein JavaScript events ka use login buttons, menus, forms, search boxes, popups aur interactive elements ke liye hota hai.

menuButton.addEventListener("click", function(){

    menu.classList.toggle("active");

});

⚠️ Important Note