onclickเหตุการณ์
ตัวอย่าง
เรียกใช้ JavaScript เมื่อคลิกปุ่ม:
<button onclick="myFunction()">Click me</button>
ความหมายและการใช้งาน
เหตุการณ์ onclickเกิดขึ้นเมื่อผู้ใช้คลิกที่องค์ประกอบ
ใน HTML:
<element onclick="myScript">
ในจาวาสคริปต์:
object.onclick = function(){myScript};
ใน JavaScript โดยใช้เมธอด addEventListener() :
object.addEventListener("click", myScript);
รายละเอียดทางเทคนิค
| ฟองอากาศ: | ใช่ |
|---|---|
| ยกเลิกได้: | ใช่ |
| ประเภทเหตุการณ์: | กิจกรรมเมาส์ |
แท็ก HTML ที่รองรับ : |
ยกเว้นทั้งหมด: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> และ <title> |
ตัวอย่างเพิ่มเติม
คลิก <button> เพื่อแสดงวันที่:
<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>
วิธีกำหนดเหตุการณ์ "onclick" ให้กับวัตถุหน้าต่าง:
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
ใช้ onclick เพื่อสร้างดรอปดาวน์:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
หน้าที่เกี่ยวข้อง
บทช่วยสอน JavaScript: เหตุการณ์ JavaScript
การอ้างอิง HTML DOM: เหตุการณ์ ondblclick
การอ้างอิง HTML DOM: เหตุการณ์ onmousedown
การอ้างอิง HTML DOM: เหตุการณ์ onmouseup
รองรับเบราว์เซอร์
onclick เป็นคุณลักษณะ DOM ระดับ 2 (2001)
ได้รับการสนับสนุนอย่างเต็มที่ในเบราว์เซอร์ทั้งหมด:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |