Event trong javascript
Nguyễn Dương 20-06-2024Khái niệm Event và EventListener
- Event là những sự kiện xảy ra trên trang như click chuột, di chuột, bấm phím,...
- EventListener là việc lắng nghe sự kiện xảy ra và phản hồi nó
Phương thức addEventListener
Phương thức addEventListener của một phần tử DOM nhận đầu vào là 2 tham số
- Sự kiện
- Hàm xử lý sự kiện (biểu thức hàm). Hàm xử lý sự kiện chỉ được gọi khi sự kiện xảy ra
Ví dụ:
document.querySelector('.check').addEventListener('click', function () {
const guess = Number(document.querySelector('.guess').value);
console.log(guess, typeof guess);
});
Các hàm xử lý giá trị toạ độ
getBoundClientRect,
window.pageXOffset,
window.pageYOffset,
documentElement.clientHeight,
documentElement.clientWidth
Cách viết scrollTo mới trong JS hiện đại
- Sử dụng element.scrollIntoView() thay thế cho window.scrollTo - màn hình sẽ tự động scroll đến phần tử element và sẽ không cần phải quan tâm đến các tọa độ nữa.
DOM Traversing
- DOM Traversing là chọn một phần tử dựa trên một phần tử khác.
- Vì đôi khi chúng ta cần chọn các phần tử so với một phần tử nhất định khác.
console.log(h1.parentElement.children);
[…h1.parentElement.children].forEach(function(el) {
//Khối lệnh thực thi
})
preventDefault: Huỷ bỏ event nếu nó có thể huỷ mà không dừng sự lan rộng(propagation) của event tới phần khác.
stopPropagation Ngăn chặn sự lan rộng của sự kiện hiện tại tới thằng khác.
stopImmediatePropagation ngăn chặn những listeners cũng đang đang lắng nghe cùng event được gọi.
Bài viết liên quan
Từ khóa this
Scope và scope chain trong javascript
Nguyên lý Javascript thực thi chương trình
Bất đồng bộ trong javascript
Lập trình hướng đối tượng
Event trong javascript
