परिचय
HTML onclick इवेंट एट्रिब्यूट तब ट्रिगर होता है जब आप HTML दस्तावेज़ में किसी HTML एलिमेंट पर माउस क्लिक करते हैं। यह सबसे अधिक उपयोग किया जाने वाला माउस इवेंट है।
सिंटैक्स
<tagname onclick="script"></tagname>
उदाहरण
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
margin-top: 1rem;
font-weight: bold;
}
</style>
</head>
<body>
<h1>HTML onclick इवेंट एट्रिब्यूट डेमो</h1>
<button class="btn" onclick='handleClick()'>मुझे क्लिक करें</button>
<div class="show"></div>
<script>
function handleClick() {
const msg = document.querySelector('.show');
msg.innerHTML = "अरे! आपने मुझे क्लिक किया";
}
</script>
</body>
</html>
आउटपुट
एक बटन दिखाई देगा। जब उपयोगकर्ता "मुझे क्लिक करें" बटन पर क्लिक करता है, तो "अरे! आपने मुझे क्लिक किया" संदेश प्रदर्शित होगा।
महत्वपूर्ण बिंदु
- किसी भी HTML एलिमेंट पर उपयोग किया जा सकता है (बटन, डिव, लिंक, इमेज, आदि)
- इवेंट ऑब्जेक्ट स्वचालित रूप से हैंडलर फंक्शन को पास होता है (इंलाइन हैंडलर में
eventवेरिएबल के रूप में) - डबल-क्लिक के लिए
ondblclickउपयोग करें - राइट-क्लिक के लिए
oncontextmenuउपयोग करें
इंलाइन हैंडलर में इवेंट ऑब्जेक्ट एक्सेस
<button onclick="handleClick(event)">क्लिक करें</button>
<script>
function handleClick(event) {
console.log('क्लिक निर्देशांक:', event.clientX, event.clientY);
console.log('लक्ष्य एलिमेंट:', event.target);
console.log('कुंजियाँ दबाई गईं:', event.ctrlKey, event.shiftKey, event.altKey);
}
</script>
आधुनिक दृष्टिकोण: addEventListener
// इंलाइन के बजाय (अनुशंसित)
const btn = document.querySelector('button');
btn.addEventListener('click', function(event) {
console.log('क्लिक हुआ!', event);
});
// मल्टीपल हैंडलर्स जोड़ सकते हैं
btn.addEventListener('click', anotherFunction);
onclick के लाभ (addEventListener पर)
- सरल, सीधा सिंटैक्स
- HTML में व्यवहार स्पष्ट दिखाई देता है
- छोटे प्रोजेक्ट्स/प्रोटोटाइपिंग के लिए ठीक
onclick के नुकसान
- एक एलिमेंट पर केवल एक हैंडलर
- HTML और JS मिक्स होते हैं (मेंटेनेंस कठिन)
- CSP (कंटेंट सिक्योरिटी पॉलिसी) के साथ समस्या
- स्कोप/क्लोजर समस्याएं
ब्राउज़र समर्थन
सभी ब्राउज़रों में पूर्ण समर्थन।
