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

एक घटना एक संकेत है कि कुछ हुआ है।

उदाहरण के लिए, DOM में कुछ बिल्ट-इन इवेंट हैं -

• क्लिक करें - एक पॉइंटिंग डिवाइस बटन (कोई भी बटन; जल्द ही केवल प्राथमिक बटन होगा) को दबाया गया है और एक तत्व पर जारी किया गया है।

• माउसओवर - एक पॉइंटिंग डिवाइस को उस तत्व पर ले जाया जाता है जिसमें श्रोता संलग्न होता है या उसके बच्चों में से एक पर होता है।

• कीअप - कोई भी कुंजी जारी की जाती है

• लोड करें - एक संसाधन और उसके आश्रित संसाधनों ने लोड करना समाप्त कर दिया है।

आप −

new Event('my-event');

आप इन घटनाओं को डिस्पैचएवेंट का उपयोग करके एक तत्व पर भेज सकते हैं -

एचटीएमएल -

<div id="my-div"></div>

जेएस -

const myDiv = document.querySelector('#my-div')
myDiv.dispatchEvent(new Event('my-event'));

AddEventListener का उपयोग करके ईवेंट प्राप्त करने पर क्या करना है, यह परिभाषित करने के लिए आप ईवेंट श्रोताओं को जोड़ सकते हैं -

एचटीएमएल -

<div id="my-div"></div>

जेएस -

const myDiv = document.querySelector('#my-div')
myDiv.addEventListener(
   // Event for which we want to listen
   'my-event',
   // Handler Function
   (e) => alert('Event fired!')
);
myDiv.dispatchEvent(new Event('my-event'));

उपरोक्त कोड को चलाने से एक ईवेंट श्रोता हमारे div से जुड़ जाएगा जो my-event की घटनाओं को सुनेगा। जब यह इस घटना का सामना करता है तो यह कॉलबैक फ़ंक्शन को कॉल करेगा।

चूंकि हम इस इवेंट को भेज रहे हैं, इसलिए इसे तुरंत सक्रिय कर दिया जाएगा और हमें अलर्ट बॉक्स दिखाई देगा।