जावास्क्रिप्ट में ब्राउज़र इवेंट्स का परिचय

एक इवेंट एक सिग्नल है कि कुछ हुआ है।

बिल्ट-इन DOM इवेंट्स के उदाहरण

• click - किसी एलिमेंट पर पॉइंटिंग डिवाइस बटन दबाया और छोड़ा गया
• mouseover - पॉइंटिंग डिवाइस एलिमेंट या उसके बच्चों पर आया
• keyup - कोई भी कुंजी छोड़ी गई
• load - रिसोर्स और उसके डिपेंडेंट रिसोर्स लोड हो गए
• submit - फॉर्म सबमिट हुआ
• keydown - कोई कुंजी दबाई गई
• resize - विंडो रीसाइज़ हुई
• scroll - एलिमेंट/विंडो स्क्रॉल हुई

कस्टम इवेंट्स बनाना

// कस्टम इवेंट बनाएं
const myEvent = new Event('my-event');

// डेटा के साथ कस्टम इवेंट
const customEvent = new CustomEvent('user-login', {
  detail: { userId: 123, name: 'John' }
});

इवेंट डिस्पैच करना

const myDiv = document.querySelector('#my-div');
myDiv.dispatchEvent(myEvent);

इवेंट लिसनर जोड़ना

const myDiv = document.querySelector('#my-div');

myDiv.addEventListener(
  'my-event',           // सुनने के लिए इवेंट
  (e) => {              // हैंडलर फंक्शन
    console.log('इवेंट फायर हुआ!', e.detail);
  }
);

// इवेंट फायर करें
myDiv.dispatchEvent(new CustomEvent('my-event', { detail: 'डेटा' }));

इवेंट ऑब्जेक्ट की उपयोगी प्रॉपर्टीज

element.addEventListener('click', (e) => {
  e.target;        // वह एलिमेंट जिसने इवेंट ट्रिगर किया
  e.currentTarget; // वह एलिमेंट जिस पर लिसनर लगा है
  e.type;          // इवेंट टाइप ("click")
  e.preventDefault(); // डिफॉल्ट व्यवहार रोकें
  e.stopPropagation(); // बबलिंग रोकें
});

इवेंट डेलीगेशन (प्रदर्शन के लिए)

// हर बटन पर लिसनर लगाने के बजाय
document.querySelector('#parent').addEventListener('click', (e) => {
  if (e.target.matches('button')) {
    console.log('बटन क्लिक हुआ:', e.target);
  }
});