JavaScript - Sự kiện chuột

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ cùng khám phá thế giới đầy thú vị của các sự kiện chuột trong JavaScript. Như một người giáo viên máy tính gần gũi, tôi rất háo hức dẫn dắt các bạn trong hành trình này. tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ xử lý các sự kiện chuột như một chuyên gia!

JavaScript - Mouse Events

Các sự kiện chuột phổ biến

Trước khi chúng ta nhảy vào mã, hãy cùng nhìn qua một số sự kiện chuột phổ biến nhất trong JavaScript. Hãy tưởng tượng những sự kiện này là những cách khác nhau mà máy tính của bạn hiểu về cách bạn tương tác với chuột của mình:

Sự kiện	Mô tả
click	Xảy ra khi chuột nhấp vào một phần tử
dblclick	Xảy ra khi chuột nhấp đúp vào một phần tử
mousedown	Xảy ra khi nút chuột được nhấn xuống trên một phần tử
mouseup	Xảy ra khi nút chuột được释放在一个元素上方
mousemove	Xảy ra khi con trỏ chuột di chuyển trong khi nó ở trên một phần tử
wheel	Xảy ra khi bánh xe chuột lăn lên hoặc xuống trên một phần tử

Bây giờ, hãy cùng khám phá từng sự kiện này với một số ví dụ thực hành!

Ví dụ: Sự kiện Click

Hãy bắt đầu với sự kiện chuột cơ bản và phổ biến nhất: sự kiện click.

<button id="myButton">Nhấp vào tôi!</button>

<script>
let button = document.getElementById('myButton');

button.addEventListener('click', function() {
alert('Nút được nhấp!');
});
</script>

Trong ví dụ này, chúng ta đang bảo JavaScript lắng nghe sự nhấp chuột vào nút của chúng ta. Khi nó nhận được sự nhấp chuột (giống như một con chó nghe thấy tiếng kêu), nó sẽ hành động và hiển thị một thông báo.

Dưới đây là những gì đang xảy ra từng bước:

Chúng ta lấy nút của mình bằng cách sử dụng document.getElementById('myButton').
Chúng ta thêm một bộ lắng nghe sự kiện vào nút bằng cách sử dụng addEventListener.
Chúng ta bảo nó lắng nghe sự kiện 'click'.
Khi một sự kiện click xảy ra, nó chạy hàm chúng ta cung cấp, điều này hiển thị một thông báo.

Thử nó ra! Nó giống như phép thuật, nhưng thực ra chỉ là JavaScript đang làm việc.

Ví dụ: Sự kiện Nhấp đúp

Bây giờ, hãy nâng cấp với sự kiện nhấp đúp. Nó giống như một cú nhấp, nhưng加倍 tốt!

<p id="myParagraph">Nhấp đúp vào tôi để thay đổi màu sắc của tôi!</p>

<script>
let paragraph = document.getElementById('myParagraph');

paragraph.addEventListener('dblclick', function() {
this.style.color = getRandomColor();
});

function getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>

Trong ví dụ này, việc nhấp đúp vào đoạn văn sẽ thay đổi màu sắc của nó thành một màu ngẫu nhiên. Nó giống như một con báo chameleon, nhưng cooler vì bạn đang kiểm soát!

Hàm getRandomColor là pháp sư nhỏ của chúng ta. Nó tạo ra một màu ngẫu nhiên mỗi khi được gọi. Đừng lo lắng quá nhiều về nội bộ của nó hiện tại - chỉ cần biết rằng nó cung cấp cho chúng ta một màu ngẫu nhiên.

Ví dụ: Sự kiệnMouseDown và MouseUp

Bây giờ, hãy nhìn vào các sự kiện mousedown và mouseup. Đây giống như âm dương của các sự kiện chuột.

<div id="myBox" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
let box = document.getElementById('myBox');

box.addEventListener('mousedown', function() {
this.style.backgroundColor = 'red';
});

box.addEventListener('mouseup', function() {
this.style.backgroundColor = 'blue';
});
</script>

Trong ví dụ này, hộp của chúng ta sẽ chuyển thành màu đỏ khi bạn nhấn nút chuột xuống trên nó, và chuyển lại thành màu xanh khi bạn释放在一个元素上方 nút. Nó giống như một trong những玩具减压, nhưng kỹ thuật số!

Ví dụ: Sự kiệnMouseMove

Sự kiện mousemove được kích hoạt mỗi khi con trỏ chuột di chuyển qua một phần tử. Nó giống như theo dõi một con chuột trong một mê cung, nhưng ít cheese hơn.

<div id="mouseTracker" style="width: 300px; height: 200px; border: 1px solid black;">
<p>Di chuột vào đây!</p>
<p id="coordinates"></p>
</div>

<script>
let tracker = document.getElementById('mouseTracker');
let coordDisplay = document.getElementById('coordinates');

tracker.addEventListener('mousemove', function(event) {
let x = event.clientX - tracker.offsetLeft;
let y = event.clientY - tracker.offsetTop;
coordDisplay.textContent = `X: ${x}, Y: ${y}`;
});
</script>

Ví dụ này tạo ra một khu vực theo dõi chuột nhỏ. Khi bạn di chuột trong hộp, nó hiển thị tọa độ. Nó giống như bạn là thuyền trưởng của một con tàu chuột nhỏ, điều hướng qua một biển của các điểm ảnh!

Ví dụ: Sự kiện Wheel

Cuối cùng, hãy nhìn vào sự kiện wheel. Sự kiện này được kích hoạt khi bạn sử dụng bánh xe chuột.

<div id="wheelDemo" style="width: 200px; height: 200px; background-color: yellow; overflow: auto;">
<p style="height: 1000px;">Cuộn tôi bằng bánh xe chuột!</p>
</div>

<script>
let wheelArea = document.getElementById('wheelDemo');

wheelArea.addEventListener('wheel', function(event) {
event.preventDefault(); // Ngăn chặn hành vi cuộn mặc định

this.scrollTop += event.deltaY;

if (this.scrollTop > 0) {
this.style.backgroundColor = `rgb(255, ${255 - this.scrollTop}, 0)`;
}
});
</script>

Trong ví dụ này, khi bạn cuộn bánh xe, màu nền thay đổi từ vàng thành đỏ. Nó giống như một hoàng hôn, nhưng bạn kiểm soát nó bằng bánh xe chuột của mình!

The event.deltaY cung cấp cho chúng ta số lượng cuộn dọc. Chúng ta sử dụng này để cả cuộn nội dung và thay đổi màu sắc.

Và thế là xong, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của các sự kiện chuột trong JavaScript. Nhớ rằng, thực hành làm nên hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các sự kiện này. Trước khi bạn biết, bạn sẽ tạo ra những trải nghiệm web tương tác làm người dùng của bạn nói "Wow, họ đã làm thế nào để làm điều đó?"

Chúc các bạn may mắn và hy vọng rằng chuột của bạn luôn nhấp chính xác!

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - addEventListener()

Hướng Dẫn Tiếp Theo:

JavaScript - Sự kiện Bàn phím