Cùng tìm hiểu về sự kiện mousemove trong JavaScript. Bạn sẽ biết khái niệm, cách bắt sự kiện mousemove cũng như ứng dụng nó để xử lý sự kiện rê chuột trong JavaScript sau bài học này.

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

• Sử dụng thuộc tính onmousemove để đăng ký trực tiếp trình xử lý sự kiện mousemove vào Element
• Sử dụng thuộc tính onmousemove để đăng ký trình xử lý sự kiện mousemove vào Element thu được từ DOM
• Sử dụng phương thức addEventListener

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

Trong trạng thái con trỏ chuột nằm phía trên của một phần tử, sự kiện mousemove trong JavaScript xảy ra khi người dùng di chuyển chuột (rê chuột). Trong quá trình di chuyển chuột sẽ xảy ra sự kiện liên tục. Và sự kiện này phát sinh trên các Element Object trong JavaScript.

Bắt sự kiện mousemove trong JavaScript

Để bắt sự kiện mousemove 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 mousemove xảy ra, và phải đăng ký trình xử lý sự kiện này vào Element cần quan sát.

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

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

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

Ví dụ cụ thể:

<input type="button" value="button" onmousemove="mouseMove()">

<script>
function mouseMove(){
    alert('Mouse Move');
}
</script>

Trong ví dụ này, trình xử lý sự kiện mouseMove() được đăng ký cho thuộc tính onmousemove của Element có tag input, nên khi sự kiện mousemove xảy ra đối với Element này, trình xử lý sự kiện sẽ bắt và xử lý nó.

Phương pháp 2: Sử dụng thuộc tính onmousemove để đăng ký trình xử lý sự kiện vào Element thu được từ DOM

Cũng với phương pháp dùng thuộc tính onmousemove để đăng ký trình xử lý sự kiện, tuy nhiên lần này chúng ta không đăng ký trực tiếp thuộc tính của Element, mà bằng cách sử dụng DOM để lấy Element rồi mới đăng ký.

Ví dụ cụ thể:

<input type="button" value="button" id="btn">

<script>
function mouseMove(){
    alert('Mouse Move');
}

let button = document.getElementById('btn');
button.onmousemove = mouseMove;
</script>

Trong ví dụ này, chúng ta dùng phương thức getElementById để lấy Element có id="btn" từ DOM. Sau đó mới dùng thuộc tính onmousemove của Element đó để đăng ký trình xử lý sự kiện mouseMove() giúp bắt sự kiện mousemove khi nó xảy ra.

• Xem thêm: getElementById trong JavaScript

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

Với phương pháp này, chúng ta cũng dùng DOM để lấy Element cần đăng ký trình xử lý sự kiện. Sau đó khai báo tên sự kiện cũng như tên trình xử lý sự kiện vào Element bằng phương thức addEventListener là xong.

Ví dụ cụ thể:

<input type="button" value="button" id="btn">

<script>
function mouseMove(){
    alert('Mouse Move');
}

let button = document.getElementById('btn');
button.addEventListener('mousemove', mouseMove);
</script>

Trong ví dụ này, chúng ta dùng phương thức getElementById để lấy Element có id="btn" từ DOM. Sau đó dùng phương thức addEventListener của Element đó để đăng ký trình xử lý sự kiện mouseMove tương ứng với tên sự kiên mousemove, nhằm giúp bắt sự kiện mousemove 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 mousemove, một MouseEvent Object kế thừa từ Event Object 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 MouseEvent 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 MouseEvent được trả về này.

<input type="button" value="button" id="btn">

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

let button = document.getElementById('btn');
button.addEventListener('mousemove', mouseMove);
</script>

Sự kiện rê chuột trong JavaScript

Hãy cùng xem một ví dụ sử dụng sự kiện mousemove để xử lý sự kiện rê chuột trong JavaScript.

Trong ví dụ này chúng ta sử dụng tới phương pháp 3: Sử dụng phương thức addEventListener để bắt sự kiện mousemove. Ngoài chúng ta cũng sử dụng đến thẻ canvas, là một thẻ HTML5 giúp xây dựng Graphic đồ họa, qua đó có thể lấy các vị trí khi đang rê chuột trong JavaScript.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#mycanvas{
border:1px solid #000000;
}
</style>
</head>
<body>

<p>Vẽ quỹ đạo của chuyển động khi rê chuột trên canvas</p>

<canvas id="mycanvas" width="600" height="200"></canvas>

<script>
function mouseMove(event){
    context.beginPath();
    context.arc(event.offsetX, event.offsetY, 10, 0, 2 * Math.PI);
    context.stroke();
}

let mycanvas = document.getElementById('mycanvas');
let context = mycanvas.getContext('2d');

mycanvas.addEventListener('mousemove', mouseMove);
</script>

</body>
</html>

Với mã lệnh này, sau khi rê chuột thì trình xử lý sự kiện mouseMove sẽ được đăng ký với tên sự kiện mousemove vào Element có id="btn" thông qua phương thức addEventListener.

Do đó khi chúng ta rê chuột (sự kiện mousemove xảy ra) thì các vị trí di chuyển sẽ được chuyển thành đồ hoạ và hiện ra trên màn hình như sau:

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách bắt sự kiện mousemove 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.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/su-kien-trong-javascript/su-kien-mousemove-trong-javascript/