Summary: DOM events

Thêm người nghe sự kiện

Để đảm bảo rằng trình duyệt gọi một chức năng cụ thể khi sự kiện xảy ra trên một phần tử, bạn phải sử dụng document.addEventListener:

var buttonEl = document.getElementById("clicker");
var onButtonClick = function() {
console.log("Oh golly gosh, you clicked me");
};
buttonEl.addEventListener("click", onButtonClick);

Bạn có thể truyền nhiều chuỗi hợp lệ làm đối số đầu tiên, xem bài viết loại sự kiện.

Nếu bạn muốn thông tin về sự kiện đã xảy ra, bạn có thể xem đối tượng sự kiện mà trình duyệt chuyển đến chức năng gọi lại của bạn:

var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("You clicked " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);

Có nhiều thuộc tính trên đối tượng sự kiện, bạn có thể xem danh sách đầy đủ ở đây .

Nếu bạn đang ghi đè hành vi nhấp vào liên kết hoặc gửi hành vi trên biểu mẫu, bạn có thể muốn gọi event.preventDefault() để ngăn hành vi mặc định của trình duyệt.

Loại bỏ người nghe sự kiện

Nếu bạn không còn cần một người nghe sự kiện cụ thể, bạn có thể loại bỏ nó bằng cách sử dụng removeEventListener:

var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("You clicked " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);
// later...
faceEl.removeEventListener("click", onFaceClick);