HOME › học javascript - lập trình javascript cơ bản>>15. sự kiện trong javascript

Sự kiện scroll trong JavaScript (khi cuộn chuột)

25 tháng 6 ,2022

Cùng tìm hiểu về sự kiện scroll trong JavaScript. Bạn sẽ biết khái niệm cũng như cách bắt sự kiện scroll trong JavaScript sau bài học này.

Có 2 phương pháp bắt sự kiện scroll trong JavaScript như sau:

Sử dụng thuộc tính onbeforeunload để đăng ký trình xử lý sự kiện scroll vào Element
Sử dụng phương thức addEventListener

Sự kiện scroll trong JavaScript là gì

Sự kiện scroll trong JavaScript xảy ra khi người dùng cuộn chuột (di chuyển con lăn chuột). Sự kiện này xảy ra liên tục trong quá trình cuộn chuột. Và sự kiện này phát sinh trên các window Object trong JavaScript.

Tên sự kiện: scroll
Loại sự kiện: Event
Khả năng Bubbling: Có
Khả năng Cancel: Không

Bắt sự kiện scroll trong JavaScript

Để bắt sự kiện scroll trong JavaScript, chúng ta cần phải có một trình xử lý sự kiện (Event Handlers) giúp xử lý khi sự kiện scroll xảy ra, và phải đăng ký trình xử lý sự kiện này vào window Object.

Tuỳ vào cách đăng ký trình xử lý sự kiện mà chúng ta có 2 phương pháp bắt sự kiện scroll trong JavaScript sau đây:

Phương pháp 1: Sử dụng thuộc tính onscroll để đăng ký trình xử lý sự kiện vào window Object

Chúng ta có thể sử dụng thuộc tính onscroll của window Object để bắt sự kiện scroll, nếu trình xử lý sự kiện(Event Handlers) đã được đăng ký cho giá trị thuộc tính onscroll của window Object.

Ví dụ cụ thể:

<script>
function scrolled(){
    alert('scroll');
}

window.onscroll = scrolled;
</script>

Trong ví dụ này, trình xử lý sự kiện scrolled được đăng ký cho thuộc tính onscroll của window Object, nên khi sự kiện scroll xảy, trình xử lý sự kiện sẽ bắt và xử lý nó.

Phương pháp 2: Sử dụng phương thức addEventListener

Với phương pháp này, chúng ta chỉ cần khai báo tên sự kiện scroll và tên trình xử lý sự kiện vào window Object bằng phương thức addEventListener là xong.

Ví dụ cụ thể:

<script>
function scrolled(){
    alert('scroll');
}

window.addEventListener('scroll', scrolled);
</script>

Trong ví dụ này, chúng ta dùng phương thức addEventListener của window Object để đăng ký trình xử lý sự kiện scrolled tương ứng với tên sự kiên scroll, nhằm giúp bắt sự kiện scroll khi nó xảy ra.

Xem thêm: addEventListener trong JavaScript

Trong trường hợp bắt sự kiện bằng phương thức addEventListener trong JavaScript, một Event Object chứa các thông tin về sự kiện đã xảy ra sẽ được trả về.

Đối với sự kiện scroll, Event Object cũng sẽ được trả về. Chúng ta có thể thao tác với các thông tin chứa trong sự kiện qua đối tượng Object này.

Ví dụ chúng ta có thể lấy và xem thông tin về sự kiện đã xảy ra thông qua thao tác với đối tượng Object được trả về này.

<script>
function scrolled(event){
    console.log(event);
}

window.addEventListener('scroll', scrolled);
</script>

Ví dụ bắt sự kiện scroll trong JavaScript

Hãy cùng xem một ví dụ cụ thể với mã HTML về cách bắt sự kiện scroll trong JavaScript như sau. Trong ví dụ này chúng ta sử dụng tới phương pháp 2: Sử dụng phương thức addEventListener để bắt sự kiện scroll. Các phương pháp khác cũng tiến hành tương tự.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Kiểm tra cuộn chuột</p>
<p id="scroll-num">scroll</p>

<script>
function scrolled(event){
    scrollNum.textContent = window.pageYOffset;
    console.log(window.pageYOffset);
}

const scrollNum = document.getElementById('scroll-num');
window.addEventListener('scroll', scrolled);
</script>

</body>
</html>

Với mã lệnh này, chúng ta dùng phương thức addEventListener để bắt sự kiện scroll, sau đó lấy lượng chuột đã được cuộn và ghi giá trị này vào trong DOM bằng thuộc tính textContent, cũng như xuất nó ra màn hình console.

Và kết quả như sau:

Xem thêm: textContent trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách bắt sự kiện scroll trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.