# Event Listener और Bubbling — JavaScript Fundamentals: Syntax से Async तक

Source: https://www.skillbyai.com/hi/javascript/js-dom-events

> Event listeners, event object, bubbling और preventDefault से user actions का जवाब दें।

## addEventListener

एक handler फ़ंक्शन जोड़ें जो event होने पर चलता है।

```js
const btn = document.querySelector("button");
btn.addEventListener("click", (event) => {
  console.log("Clicked!", event.target);
});
```

## Event ऑब्जेक्ट

हर handler को एक `event` ऑब्जेक्ट मिलता है — `event.target` असली क्लिक किया गया एलिमेंट है, और `event.preventDefault()` ब्राउज़र के डिफ़ॉल्ट व्यवहार को रोकता है।

## Event Bubbling

Events target एलिमेंट से उसके पूर्वजों तक ऊपर **bubble** होते हैं — किसी बटन पर क्लिक उसके parent `div` के listener को भी चलाता है, जब तक `event.stopPropagation()` से न रोका जाए।

**Quiz:** event.preventDefault() क्या करता है?

- [ ] Event को bubble होने से रोकता है
- [ ] Event listener को हटा देता है
- [ ] Page को reload करता है
- [x] उस event के लिए ब्राउज़र की डिफ़ॉल्ट क्रिया रोकता है

*Answer:* उस event के लिए ब्राउज़र की डिफ़ॉल्ट क्रिया रोकता है. जैसे, यह किसी फ़ॉर्म के डिफ़ॉल्ट submit-and-reload व्यवहार को रोकता है — bubbling अलग मामला है जिसे stopPropagation() संभालता है।