ऑनक्लिक घटना
उदाहरण
एक बटन क्लिक होने पर जावास्क्रिप्ट निष्पादित करें:
<button onclick="myFunction()">Click me</button>
परिभाषा और उपयोग
onclick
घटना तब होती है जब उपयोगकर्ता किसी तत्व पर क्लिक करता है ।
एचटीएमएल में:
<element onclick="myScript">
जावास्क्रिप्ट में:
object.onclick = function(){myScript};
जावास्क्रिप्ट में, addEventListener() विधि का उपयोग करना:
object.addEventListener("click", myScript);
टेक्निकल डिटेल
बुलबुले: | हां |
---|---|
रद्द करने योग्य: | हां |
घटना प्रकार: | माउसइवेंट |
समर्थित HTML टैग: |
सभी छूट: <आधार>, <bdo>, <br>, <सिर>, <html>, <iframe>, <मेटा>, <परम>, <स्क्रिप्ट>, <शैली>, और <शीर्षक> |
और ज्यादा उदाहरण
दिनांक प्रदर्शित करने के लिए <बटन> पर क्लिक करें:
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
टेक्स्ट का रंग बदलने के लिए <h3> एलिमेंट पर क्लिक करें:
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
किसी तत्व का रंग बदलने का दूसरा उदाहरण:
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
टेक्स्ट को एक इनपुट फील्ड से दूसरे में कॉपी करने के लिए क्लिक करें:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
विंडो ऑब्जेक्ट पर "ऑनक्लिक" ईवेंट कैसे असाइन करें:
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
ड्रॉपडाउन बनाने के लिए ऑनक्लिक का उपयोग करें:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
संबंधित पृष्ठ
जावास्क्रिप्ट ट्यूटोरियल: जावास्क्रिप्ट इवेंट्स
HTML DOM संदर्भ: ondblclick घटना
HTML DOM संदर्भ: ऑन- हाउसडाउन ईवेंट
HTML DOM संदर्भ: ऑनमाउसअप ईवेंट
ब्राउज़र समर्थन
onclick
एक डोम लेवल 2 (2001) फीचर है।
यह सभी ब्राउज़रों में पूरी तरह से समर्थित है:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |