HTML5 स्टैंडर्ड इवेंट्स क्या हैं?

परिचय

जब कोई उपयोगकर्ता आपकी वेबसाइट पर जाता है, तो वे टेक्स्ट और इमेजेस और दिए गए लिंक्स पर क्लिक करते हैं, चीजों पर होवर करते हैं, आदि। ये JavaScript द्वारा कहे जाने वाले इवेंट्स के उदाहरण हैं।

हम अपने इवेंट हैंडलर्स को JavaScript या VBScript में लिख सकते हैं और आप इन इवेंट हैंडलर्स को इवेंट टैग एट्रिब्यूट के मान के रूप में निर्दिष्ट कर सकते हैं। HTML5 विनिर्देश विभिन्न इवेंट एट्रिब्यूट्स को परिभाषित करता है जैसा कि नीचे सूचीबद्ध है:

HTML5 इवेंट एट्रिब्यूट्स की पूरी सूची

एट्रिब्यूट	मान	विवरण
onabort	script	एबॉर्ट इवेंट पर ट्रिगर होता है
onafterprint	script	दस्तावेज़ प्रिंट होने के बाद ट्रिगर होता है
onbeforeprint	script	दस्तावेज़ प्रिंट होने से पहले ट्रिगर होता है
onbeforeunload	script	दस्तावेज़ अनलोड होने से पहले ट्रिगर होता है
onblur	script	विंडो फोकस खोने पर ट्रिगर होता है
oncanplay	script	मीडिया चलना शुरू कर सकता है लेकिन बफरिंग के लिए रुक सकता है
oncanplaythrough	script	मीडिया बिना बफरिंग के अंत तक चलाया जा सकता है
onchange	script	जब कोई एलिमेंट बदलता है तो ट्रिगर होता है
onclick	script	माउस क्लिक पर ट्रिगर होता है
oncontextmenu	script	कॉन्टेक्स्ट मेनू ट्रिगर होने पर
ondblclick	script	माउस डबल-क्लिक पर ट्रिगर होता है
ondrag	script	जब एलिमेंट ड्रैग किया जाता है
ondragend	script	ड्रैग ऑपरेशन के अंत में
ondragenter	script	जब एलिमेंट वैलिड ड्रॉप टारगेट पर ड्रैग किया गया हो
ondragleave	script	जब एलिमेंट वैलिड ड्रॉप टारगेट छोड़ता है
ondragover	script	जब एलिमेंट वैलिड ड्रॉप टारगेट पर ड्रैग किया जा रहा हो
ondragstart	script	ड्रैग ऑपरेशन की शुरुआत में
ondrop	script	जब ड्रैग किया गया एलिमेंट ड्रॉप किया जाता है
ondurationchange	script	मीडिया की लंबाई बदलने पर
onemptied	script	मीडिया रिसोर्स एलिमेंट अचानक खाली हो जाता है
onended	script	मीडिया अंत तक पहुँच गया
onerror	script	जब कोई त्रुटि होती है
onfocus	script	विंडो को फोकस मिलने पर
oninput	script	जब एलिमेंट को उपयोगकर्ता इनपुट मिलता है
oninvalid	script	जब एलिमेंट अमान्य होता है
onkeydown	script	जब कोई कुंजी दबाई जाती है
onkeypress	script	जब कुंजी दबाई और छोड़ी जाती है
onkeyup	script	जब कुंजी छोड़ी जाती है
onload	script	दस्तावेज़ लोड होने पर
onloadeddata	script	मीडिया डेटा लोड होने पर
onloadedmetadata	script	मीडिया की अवधि और अन्य डेटा लोड होने पर
onloadstart	script	ब्राउज़र मीडिया डेटा लोड करना शुरू करता है
onmousedown	script	माउस बटन दबाए जाने पर
onmousemove	script	माउस पॉइंटर हिलने पर
onmouseout	script	माउस पॉइंटर एलिमेंट से बाहर निकलने पर
onmouseover	script	माउस पॉइंटर एलिमेंट पर आने पर
onmouseup	script	माउस बटन छोड़े जाने पर
onmousewheel	script	माउस व्हील घूमने पर
onoffline	script	दस्तावेज़ ऑफलाइन होने पर
ononline	script	दस्तावेज़ ऑनलाइन होने पर
onpagehide	script	विंडो छिपने पर
onpageshow	script	विंडो विज़िबल होने पर
onpause	script	मीडिया डेटा पॉज़ होने पर
onplay	script	मीडिया चलना शुरू होने पर
onplaying	script	मीडिया चलना शुरू हो गया है
onpopstate	script	विंडो की हिस्ट्री बदलने पर
onprogress	script	ब्राउज़र मीडिया डेटा फेच कर रहा है
onratechange	script	मीडिया की प्लेइंग दर बदलने पर
onreset	script	फॉर्म रीसेट होने पर
onresize	script	विंडो रीसाइज़ होने पर
onscroll	script	एलिमेंट का स्क्रॉलबार स्क्रॉल होने पर
onseeked	script	सीकिंग ऑपरेशन समाप्त होने पर
onseeking	script	सीकिंग ऑपरेशन शुरू होने पर
onselect	script	एलिमेंट चुने जाने पर
onstalled	script	मीडिया डेटा फेच करने में त्रुटि
onstorage	script	स्टोरेज एरिया अपडेट होने पर
onsubmit	script	फॉर्म सबमिट होने पर
onsuspend	script	ब्राउज़र मीडिया फेच करना बंद करता है
ontimeupdate	script	मीडिया प्लेइंग पोजीशन बदलने पर
onvolumechange	script	वॉल्यूम बदलने पर (म्यूट सहित)
onwaiting	script	मीडिया रुका लेकिन फिर से शुरू होने की उम्मीद है
onwheel	script	माउस व्हील घूमने पर (आधुनिक)
ontoggle	script	<details> एलिमेंट खुलने/बंद होने पर

इवेंट हैंडलिंग के आधुनिक तरीके

1. addEventListener (अनुशंसित)

// इंलाइन हैंडलर्स के बजाय इसका उपयोग करें
element.addEventListener('click', function(event) {
    console.log('क्लिक हुआ', event);
});

// एकाधिक हैंडलर्स जोड़ सकते हैं
element.addEventListener('click', handler1);
element.addEventListener('click', handler2);

2. इवेंट ऑब्जेक्ट

element.addEventListener('click', function(e) {
    e.preventDefault(); // डिफ़ॉल्ट व्यवहार रोकें
    e.stopPropagation(); // बबलिंग रोकें
    console.log(e.target); // ट्रिगर करने वाला एलिमेंट
    console.log(e.currentTarget); // लिस्टनर वाला एलिमेंट
    console.log(e.clientX, e.clientY); // माउस पोजीशन
});

3. इवेंट डेलीगेशन

// पैरेंट पर एक लिस्टनर, बच्चों के लिए
document.getElementById('list').addEventListener('click', function(e) {
    if (e.target.matches('li')) {
        console.log('आइटम क्लिक किया:', e.target.textContent);
    }
});

इवेंट श्रेणियाँ

श्रेणी	इवेंट्स
माउस इवेंट्स	click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, wheel
कीबोर्ड इवेंट्स	keydown, keyup, keypress
फॉर्म इवेंट्स	submit, reset, change, input, focus, blur, invalid
विंडो/दस्तावेज़ इवेंट्स	load, unload, resize, scroll, beforeunload
ड्रैग एंड ड्रॉप	drag, dragstart, dragend, dragover, dragenter, dragleave, drop
मीडिया इवेंट्स	play, pause, ended, timeupdate, volumechange, canplay, loadeddata
क्लिपबोर्ड इवेंट्स	copy, cut, paste
टच इवेंट्स (मोबाइल)	touchstart, touchmove, touchend, touchcancel
पॉइंटर इवेंट्स (आधुनिक)	pointerdown, pointerup, pointermove, pointerover, pointerout

सर्वोत्तम अभ्यास

इंलाइन हैंडलर्स (onclick="") से बचें - addEventListener उपयोग करें
इवेंट डेलीगेशन उपयोग करें - डायनामिक एलिमेंट्स और प्रदर्शन के लिए
पैसिव लिस्टनर्स - स्क्रॉल प्रदर्शन के लिए { passive: true }
इवेंट ऑब्जेक्ट का उपयोग करें - e.preventDefault(), e.stopPropagation()
क्लीनअप करें - removeEventListener जब आवश्यक न हो