เหตุการณ์ onclick
การระบุและวิธีใช้
เหตุการณ์ onclick ที่เกิดขึ้นเมื่อผู้ใช้คลิกอิเล็กทรอนิกส์
ตัวอย่าง
ปฏิบัติการ JavaScript ขณะที่คลิกปุ่ม
<button onclick="myFunction()">Click me</button>
มีตัวอย่าง TIY มากมายด้านล่างของหน้า
รูปแบบ
ใน HTML ดังนี้：
<element onclick="myScript">
ใน JavaScript ดังนี้：
object.onclick = function(){myScript};
ใน JavaScript ใช้วิธี addEventListener() ดังนี้：
object.addEventListener("click", myScript);
หมายเหตุ：Internet Explorer 8 หรือตัวเวอร์ชั่นเก่ากว่าไม่สนับสนุน addEventListener() 方法。
รายละเอียดเทคนิค
| การลุกตัว (Bubble) | สนับสนุน |
|---|---|
| ยกเลิกได้ | สนับสนุน |
| ประเภทเหตุการณ์： | MouseEvent |
| ตาราง HTML ที่สนับสนุน： | ทุกส่วนของ HTML นอกจาก：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> และ <title> |
| DOM รุ่น： | Level 2 Events |
การสนับสนุนของเบราเซอร์
| เหตุการณ์ | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onclick | สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน |
รายละเอียดเพิ่มเติม
ตัวอย่าง
单击 <button> ปุ่มเพื่อแสดง วันที่ และ เวลา ปัจจุบัน：
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
ตัวอย่าง
คลิกอิเลิ้ม <p> เพื่อเปลี่ยนสีของข้อความให้เป็นสีแดง:
<p id="demo" onclick="myFunction()">คลิกเพื่อเปลี่ยนสีของข้อความของฉัน</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
ตัวอย่าง
ตัวอย่างอีกที่แสดงว่าเช่นไรจะเปลี่ยนสีของ <p> อิเลิ้มด้วยการคลิก:
<p onclick="myFunction(this, 'red')">คลิกเพื่อเปลี่ยนสีของข้อความของฉัน</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
ตัวอย่าง
คลิกปุ่มเพื่อคัดลอกข้อความจากช่องใส่ข้อมูลหนึ่งและแสดงในช่องอื่น:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
ตัวอย่าง
จัดสรรเหตุการณ์ "onclick" ให้กับองค์ประกอบ window:
window.onclick = myFunction;
// ถ้าผู้ใช้คลิกในหน้าต่าง จะตั้งสี背景ของ <body> ให้เป็นเหลือง
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
ตัวอย่าง
ใช้ onclick สร้างปุ่มด้านลง:
// ได้รับปุ่ม และปฏิบัติ myFunction เมื่อผู้ใช้คลิก
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction ในการเพิ่มและลบคลาส show สำหรับซ่อนและแสดงเนื้อหาด้านลง */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
เพิ่มเติม
ตูดสอบ JavaScript รวมถึง:เหตุการณ์ JavaScript
คู่มือ HTML DOM รวมถึง:เหตุการณ์ ondblclick
คู่มือ HTML DOM รวมถึง:เหตุการณ์ onmousedown
คู่มือ HTML DOM รวมถึง:เหตุการณ์ onmouseup
