📘 Lesson · Lesson 36

Events

What Events Are

An event is something that HAPPENS in the browser — a click, a key press, a page finishing loading, a form being submitted. JavaScript can "listen" for these events and run code in response. This is what makes web pages interactive rather than static: instead of your code running once top-to-bottom and stopping, it waits, ready to react whenever the user does something. Recall the house analogy — HTML is the structure, CSS is the paint, and events are what happen when someone actually flips the light switch.

Common Event Types

Category	Events
Mouse	click, dblclick, mouseover, mouseout, mousemove
Keyboard	keydown, keyup, keypress
Form	submit, change, input, focus, blur
Window	load, resize, scroll

The one you'll use most by far is click. After that: input fires every time a user types a character (great for live search and validation), change fires when a field loses focus after changing, and submit fires when a form is submitted. focus and blur fire when a field is selected and deselected. Mouse and keyboard events power games and shortcuts. You don't need to memorise the list — recognise the categories, and look up specifics when needed.

The Event Object — details about what happened

button.addEventListener("click", function(event) {
    console.log(event.type);        // "click"
    console.log(event.target);      // the element that was clicked
    console.log(event.clientX);     // mouse X position
});

// For keyboard events:
input.addEventListener("keydown", function(e) {
    console.log(e.key);             // "a", "Enter", "Escape"...
    if (e.key === "Enter") { search(); }
});

When an event fires, the browser automatically passes an "event object" to your function — it holds all the details about what just happened. By convention it's named event or just e. From it you can read the event type, which element was involved, the mouse coordinates, or which key was pressed (e.key). You don't create this object; the browser hands it to you as the first argument. Checking e.key === "Enter" is how you make a search box respond to the Enter key.

event.target — which element triggered it

<ul id="list">
    <li>Item A</li>
    <li>Item B</li>
</ul>

// Listen on the PARENT, and find out which child was clicked:
document.querySelector("#list").addEventListener("click", function(e) {
    console.log(e.target.textContent);     // "Item A" or "Item B"
    e.target.remove();                     // delete the clicked item
});

event.target is the exact element the user interacted with — not necessarily the one you attached the listener to. This enables a powerful technique called event delegation: instead of adding a listener to every list item (tedious, and impossible for items added later), you add ONE listener to the parent. When any child is clicked, the event bubbles up to the parent, and e.target tells you which child it was. This is how professional code handles dynamic lists — one listener, any number of items.

preventDefault() — stopping the browser's default action

// Stop a form from reloading the page on submit:
form.addEventListener("submit", function(e) {
    e.preventDefault();             // ← the page no longer reloads
    console.log("Handling with JavaScript instead");
});

// Stop a link from navigating:
link.addEventListener("click", function(e) {
    e.preventDefault();
    console.log("Link clicked, but we're staying here");
});

Many elements have built-in default behaviour: forms reload the page when submitted, links navigate away, right-click opens a menu. event.preventDefault() cancels that default. The classic use is form handling — without it, submitting a form reloads the whole page and your JavaScript never gets a chance to run. Nearly every JavaScript form handler starts with e.preventDefault(). Remember this line; you will need it in the forms chapter and in every real project.

Exam Corner

Q: What is an event? Something that happens in the browser (a click, keypress, load) that JavaScript can respond to.

Q: What is the event object? An object the browser passes to your handler with details about the event.

Q: What does event.target give you? The exact element that triggered the event.

Q: What is event delegation? Attaching one listener to a parent and using event.target to identify which child was clicked.

Q: What does preventDefault() do? Stops the browser's default action, e.g. a form reloading the page.

Events क्या हैं

Event वह है जो browser में HOTA है — click, key press, page का load पूरा होना, form submit होना. JavaScript इन events को "सुन" सकता है और जवाब में code चला सकता है. यही web pages को static के बजाय interactive बनाता है: आपका code एक बार ऊपर से नीचे चलकर रुकने के बजाय, इंतज़ार करता है, तैयार कि जब भी user कुछ करे प्रतिक्रिया दे. घर वाला analogy याद कीजिए — HTML structure है, CSS पेंट है, और events वह हैं जो तब होता है जब कोई असल में light switch दबाता है.

आम Event Types

श्रेणी	Events
Mouse	click, dblclick, mouseover, mouseout, mousemove
Keyboard	keydown, keyup, keypress
Form	submit, change, input, focus, blur
Window	load, resize, scroll

जो आप सबसे ज़्यादा use करेंगे वह है click. उसके बाद: input हर बार fire होता है जब user कोई character type करे (live search और validation के लिए बढ़िया), change तब fire होता है जब field बदलने के बाद focus खोए, और submit तब जब form submit हो. focus और blur तब fire होते हैं जब field चुना और छोड़ा जाए. Mouse और keyboard events games तथा shortcuts चलाते हैं. आपको list याद करने की ज़रूरत नहीं — श्रेणियां पहचानिए, और ज़रूरत पर विशेष देख लीजिए.

Event Object — क्या हुआ इसका विवरण

button.addEventListener("click", function(event) {
    console.log(event.type);        // "click"
    console.log(event.target);      // jis element par click hua
    console.log(event.clientX);     // mouse X position
});

// Keyboard events ke liye:
input.addEventListener("keydown", function(e) {
    console.log(e.key);             // "a", "Enter", "Escape"...
    if (e.key === "Enter") { search(); }
});

जब event fire होता है, browser अपने आप आपके function को "event object" भेजता है — यह अभी जो हुआ उसके सारे विवरण रखता है. परंपरा से इसका नाम event या बस e होता है. इससे आप event type, कौन-सा element शामिल था, mouse coordinates, या कौन-सी key दबी (e.key) पढ़ सकते हैं. आप यह object नहीं बनाते; browser इसे पहले argument के रूप में सौंपता है. e.key === "Enter" जांचना ऐसे ही आप search box को Enter key पर प्रतिक्रिया कराते हैं.

event.target — किस element ने trigger किया

<ul id="list">
    <li>Item A</li>
    <li>Item B</li>
</ul>

// PARENT par suno, aur pata karo kaun-sa child click hua:
document.querySelector("#list").addEventListener("click", function(e) {
    console.log(e.target.textContent);     // "Item A" ya "Item B"
    e.target.remove();                     // click kiya item hatao
});

event.target वह ठीक element है जिससे user ने interact किया — ज़रूरी नहीं वही जिस पर आपने listener लगाया. यह event delegation नाम की ताकतवर तकनीक संभव करता है: हर list item पर listener जोड़ने (थकाऊ, और बाद में जोड़े items के लिए असंभव) के बजाय, आप parent पर EK listener जोड़ते हैं. जब कोई child click हो, event parent तक bubble करता है, और e.target बताता है वह कौन-सा child था. Professional code dynamic lists ऐसे ही संभालता है — एक listener, कितने भी items.

preventDefault() — browser की default क्रिया रोकना

// Form ko submit par page reload karne se roko:
form.addEventListener("submit", function(e) {
    e.preventDefault();             // ← page ab reload nahi hoga
    console.log("Handling with JavaScript instead");
});

// Link ko navigate karne se roko:
link.addEventListener("click", function(e) {
    e.preventDefault();
    console.log("Link click hua, par hum yahin ruke hain");
});

कई elements का built-in default व्यवहार है: forms submit पर page reload करते हैं, links चले जाते हैं, right-click menu खोलता है. event.preventDefault() वह default रद्द करता है. Classic इस्तेमाल form handling है — इसके बिना, form submit करना पूरा page reload कर देता है और आपके JavaScript को चलने का मौका ही नहीं मिलता. लगभग हर JavaScript form handler e.preventDefault() से शुरू होता है. यह line याद रखिए; forms chapter में और हर असली project में आपको इसकी ज़रूरत होगी.

Exam Corner

Q: Event क्या है? Browser में होने वाली कोई चीज़ (click, keypress, load) जिस पर JavaScript प्रतिक्रिया दे सकता है.

Q: Event object क्या है? वह object जो browser आपके handler को event के विवरण के साथ भेजता है.

Q: event.target क्या देता है? वह ठीक element जिसने event trigger किया.

Q: Event delegation क्या है? Parent पर एक listener लगाकर event.target से पहचानना कौन-सा child click हुआ.

Q: preventDefault() क्या करता है? Browser की default क्रिया रोकता है, जैसे form का page reload करना.

← Back to JavaScript Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.