# Event Listener और Bubbling — जावास्क्रिप्ट

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

> यूज़र की क्रियाओं पर प्रतिक्रिया, और DOM में events कैसे चलते हैं।

## 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 होने से रोकता है
- [x] उस event के लिए ब्राउज़र की डिफ़ॉल्ट क्रिया रोकता है
- [ ] Event listener को हटा देता है

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