Sự kiện onclick

Sự kiện DOM MouseEvent

Định nghĩa và cách sử dụng

Sự kiện onclick xảy ra khi người dùng nhấp vào phần tử.

Mô hình

Chạy JavaScript khi nhấp vào nút:

<button onclick="myFunction()">Nhấp vào tôi</button>

Thử trực tiếp

Dưới trang này có nhiều ví dụ TIY khác.

Cú pháp

Trong HTML:

<element onclick="myScript">

Thử trực tiếp

Trong JavaScript:

object.onclick = function(){myScript};

Thử trực tiếp

Trong JavaScript, sử dụng phương thức addEventListener():

object.addEventListener("click", myScript);

Thử trực tiếp

Chú ý:Internet Explorer 8 hoặc các phiên bản trước không hỗ trợ addEventListener() phương thức.

Chi tiết kỹ thuật

Nổi bọt: Hỗ trợ
Có thể hủy bỏ: Hỗ trợ
Loại sự kiện: MouseEvent
Các thẻ HTML được hỗ trợ: Tất cả các phần tử HTML, trừ:<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> và <title>
Phiên bản DOM: Level 2 Events

Hỗ trợ trình duyệt

Sự kiện Chrome IE Firefox Safari Opera
onclick Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Các ví dụ khác

Mô hình

Nhấp vào <button> để hiển thị ngày và giờ hiện tại:

<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>

Thử trực tiếp

Mô hình

Nhấp vào phần tử <p> để thay đổi màu văn bản của văn bản thành đỏ:

<p id="demo" onclick="myFunction()">Nhấp vào tôi để thay đổi màu văn bản của tôi.</p>
<script>
function myFunction() {
  document.getElementById("demo").style.color = "red";
}
</script>

Thử trực tiếp

Mô hình

Một ví dụ khác về cách thay đổi màu văn bản của phần tử <p> bằng cách nhấp chuột:

<p onclick="myFunction(this, 'red')">Nhấp vào tôi để thay đổi màu văn bản của tôi.</p>
<script>
function myFunction(elmnt,clr) {
  elmnt.style.color = clr;
}
</script>

Thử trực tiếp

Mô hình

Nhấp vào nút sẽ sao chép một đoạn văn bản từ trường nhập vào một trường nhập khác:

<button onclick="myFunction()">Chép văn bản</button>
<script>
function myFunction() {
  document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>

Thử trực tiếp

Mô hình

Gán sự kiện "onclick" cho đối tượng window: 
window.onclick = myFunction;
// Nếu người dùng nhấp chuột vào cửa sổ, thì đặt màu nền của <body> thành vàng
function myFunction() {
  document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}

Thử trực tiếp

Mô hình

Sử dụng onclick để tạo nút thả xuống:

// Lấy nút, khi người dùng nhấp, thực hiện myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction 在添加和 xóa bỏ lớp "show" giữa, dùng để ẩn và hiển thị nội dung thả xuống */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Thử trực tiếp

Trang liên quan

Giáo trình JavaScript:Sự kiện JavaScript

Tài liệu tham khảo HTML DOM:Sự kiện ondblclick

Tài liệu tham khảo HTML DOM:Sự kiện onmousedown

Tài liệu tham khảo HTML DOM:Sự kiện onmouseup

Sự kiện DOM MouseEvent