फ़र्ज़ करें आप अपनी car चला रहे हैं। इसमें हर जगह sensors लगे हैं: अगर आप door खोलते हैं, तो एक light जल जाती है। अगर आप horn दबाते हैं, तो आवाज़ आती है। अगर आप gas pedal दबाते हैं, तो engine rev करने लगता है।
HTML events वही car sensors हैं। जब कोई visitor आपकी website के साथ interact करता है (जैसे किसी button पर click करना, किसी input box में टाइप करना, या page पर scroll करना), तो browser एक event trigger करता है।
इन events को JavaScript scripts से जोड़कर, आप अपने webpage को user actions पर तुरंत respond करा सकते हैं, जिससे static text pages पूरी तरह functional, interactive web apps बन जाते हैं।
events browser में होने वाली घटनाओं या actions को represent करते हैं, जो आमतौर पर user interactions से trigger होते हैं। HTML आपको अपने tags के साथ सीधे event handlers जोड़ने देता है, ताकि इन actions के होने पर JavaScript कोड चले।
Note:
कोड को साफ और व्यवस्थित रखने के लिए inline event attributes की बजाय event listener scripts का इस्तेमाल करें।
Warning:
inline event attributes के अंदर complex, heavy code न लिखें; अपनी scripts modular रखें।
mouse events mouse interactions के जवाब में scripts trigger करते हैं, जैसे किसी button को click करना (onclick), double-click करना (ondblclick), या किसी element पर hover करना (onmouseover)।
Note:
अपने tools के पास मददगार, इंटरैक्टिव guide boxes दिखाने के लिए hover events का इस्तेमाल करें।
Warning:
सुनिश्चित करें कि आपके mouse actions keyboard-only और mobile users के लिए भी काम करें जो hover नहीं कर सकते।
उदाहरण: Mouse Events
markup
<button onclick="console.log('clicked')" ondblclick="console.log('double-clicked')" onmouseover="console.log('hovered')">
Hover or click me
</button>
कीबोर्ड इवेंट्स
keyboard events keyboard interactions के जवाब में scripts trigger करते हैं, जैसे किसी key को दबाना (onkeydown) या छोड़ना (onkeyup), जो keyboard shortcuts बनाने में काम आता है।
Note:
users को Enter key दबाकर जल्दी calculations submit करने देने के लिए keyboard events का इस्तेमाल करें।
Warning:
पक्का करें कि आपके custom keyboard shortcuts standard browser या screen-reader navigation shortcuts से conflict न करें।
form events form interactions के जवाब में scripts trigger करते हैं, जैसे form submit करना (onsubmit), किसी input value को बदलना (onchange), या text field में टाइप करना (oninput)।
Note:
server पर data भेजने से पहले JavaScript से user inputs validate करने के लिए onsubmit का इस्तेमाल करें।
Warning:
validation के दौरान browser को page reload करने से रोकने के लिए अपने onsubmit handlers के अंदर हमेशा preventDefault call करें।
window events browser window की actions के जवाब में scripts trigger करते हैं, जैसे page लोड पूरा होने पर (onload), window resize होने पर (onresize), या user के scroll करने पर (onscroll)।
Note:
page पूरी तरह लोड होने के बाद ही अपने scripts initialize करने के लिए onload event का इस्तेमाल करें।
Warning:
scroll event listeners के अंदर heavy, complex scripts लिखने से बचें क्योंकि इससे lag हो सकता है।
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}