Sự kiện onclick
Thí dụ
Thực thi JavaScript khi một nút được nhấp:
<button onclick="myFunction()">Click me</button>
Định nghĩa và Cách sử dụng
Sự onclickkiện xảy ra khi người dùng nhấp vào một phần tử.
Trong HTML:
<element onclick="myScript">
Trong JavaScript:
object.onclick = function(){myScript};
Trong JavaScript, sử dụng phương thức addEventListener ():
object.addEventListener("click", myScript);
Chi tiết kỹ thuật
| Bong bóng: | Đúng |
|---|---|
| Có thể hủy bỏ: | Đúng |
| Loại sự kiện: | MouseEvent |
| Các thẻ HTML được hỗ trợ: |
Tất cả ngoại lệ: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> và <title> |
Các ví dụ khác
Nhấp vào <button> để hiển thị ngày:
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
Nhấp vào phần tử <h3> để thay đổi màu văn bản:
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Một ví dụ khác về cách thay đổi màu của một phần tử:
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
Nhấp để sao chép văn bản từ trường nhập này sang trường nhập khác:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Cách gán sự kiện "onclick" cho đối tượng window:
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Sử dụng onclick để tạo menu thả xuống:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Các trang liên quan
Hướng dẫn JavaScript: Sự kiện JavaScript
Tham chiếu DOM HTML: sự kiện ondblclick
Tham chiếu DOM HTML: sự kiện onmousedown
Tham chiếu HTML DOM: sự kiện onmouseup
Hỗ trợ trình duyệt
onclicklà một tính năng DOM Mức 2 (2001).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |