เหตุการณ์ onclick

วัตถุที่จัดกิจกรรม

ตัวอย่าง

รัน JavaScript เมื่อมีการคลิกปุ่ม:

<button onclick="myFunction()">Click me</button>

ลองตัวเอง»

เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง

ความหมายและการใช้งาน

เหตุการณ์ onclick เกิดขึ้นเมื่อผู้ใช้คลิกที่องค์ประกอบ

สนับสนุนเบราว์เซอร์

เหตุการณ์
onclick	ใช่	ใช่	ใช่	ใช่	ใช่

วากยสัมพันธ์

ใน HTML:

< ลองตัวเอง»

ใน JavaScript:

object .onclick=function(){ ลองตัวเอง»

ใน JavaScript โดยใช้ addEventListener() วิธีการ:

object .addEventListener("click", myScript );

ลองตัวเอง»

หมายเหตุ: addEventListener() วิธีการที่ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และรุ่นก่อนหน้านี้

รายละเอียดทางเทคนิค

บับเบิ้ล:	ใช่
ยกเลิก:	ใช่
ประเภทเหตุการณ์:	MouseEvent
แท็ก HTML ที่รองรับ:	องค์ประกอบ HTML ทั้งหมดยกเว้น: <ฐาน> <BDO> ฟรี <head> <html> <iframe> <meta> <พารามิเตอร์> <script> <style> และ <title>
DOM เวอร์ชัน:	ระดับที่ 2 เหตุการณ์

ตัวอย่างอื่น ๆ

ตัวอย่าง

คลิกที่ <button> องค์ประกอบที่จะแสดงวันที่ปัจจุบันวันที่และเวลา:

ลองตัวเอง»

ตัวอย่าง

คลิกที่ <p> องค์ประกอบในการเปลี่ยนสีข้อความสีแดง:

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>

<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>

ลองตัวเอง»

ตัวอย่าง

อีกตัวอย่างหนึ่งเกี่ยวกับวิธีการเปลี่ยนสีของที่ <p> องค์ประกอบโดยคลิกที่:

<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text color.</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.onclick = myFunction;

// If the user clicks in the window, set the background color of <body> to yellow
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}

ลองตัวเอง»

ตัวอย่าง

ใช้ onclick เพื่อสร้างปุ่มแบบเลื่อนลง:

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
}
}

ลองตัวเอง»