Sự kiện onmousemove trong JavaScript

• Trần Thị Vân
• 1104
• 26/08/2025

Chức năng của Sự kiện onmousemove trong JavaScript

Sự kiện onmousemove trong JavaScript dùng để lấy tọa độ X và tọa độ Y của con trỏ chuột mỗi khi di chuyển con chuột.

Code Sự kiện onmousemove trong JavaScript

Sự kiện onmousemove gán trực tiếp trong JavaScript

onmousemove="layToaDo(event)"

<div id="ktrai">
<div id="kvuong" onmousemove="layToaDo(event)">Di chuyển</div>
<p>Tọa độ X: <span id="x"></span> - Tọa độ Y: <span id="y"></span></p>
</div>

<script>
function layToaDo(e){
  var x = e.clientX;
  var y = e.clientY;
  document.getElementById("x").innerHTML = x;
  document.getElementById("y").innerHTML = y;
}
</script>

Chạy Thử

Sự kiện onmousemove không gán trực tiếp trong JavaScript

 kvuong.onmousemove = function(e){
 document.getElementById("x").innerHTML = x;
 document.getElementById("y").innerHTML = y;
 };

<div id="ktrai">
<div id="kvuong" onmousemove="layToaDo(event)">Di chuyển</div>
<p>Tọa độ X: <span id="x"></span> - Tọa độ Y: <span id="y"></span></p>
</div>

<div id="kphai">
<div id="kvuong2" onmousemove="layToaDo(event)">Di chuyển</div>
<p>Tọa độ X: <span id="x2"></span> - Tọa độ Y: <span id="y2"></span></p>
</div>

<script>
 var kvuong = document.getElementById('kvuong');
 kvuong.onmousemove = function(e){
 var x = e.clientX;
 var y = e.clientY;
 document.getElementById("x").innerHTML = x;
 document.getElementById("y").innerHTML = y;
 };
 
 var kvuong2 = document.getElementById('kvuong2');
 kvuong2.addEventListener('mousemove', function(e){
 var x = e.clientX;
 var y = e.clientY;
 document.getElementById("x2").innerHTML = x;
 document.getElementById("y2").innerHTML = y;
 }); 
</script>

Chạy Thử

Những lưu ý khi sử dụng onmousemove trong JavaScript

Khi làm việc với onmousemove, điều quan trọng không chỉ là biết cách bắt sự kiện mà còn phải kiểm soát cách xử lý dữ liệu bên trong hàm. Nếu sử dụng không hợp lý, đoạn mã có thể thực hiện quá nhiều thao tác trong thời gian ngắn và ảnh hưởng đến độ mượt của trang.

onmousemove có thể được kích hoạt liên tục khi di chuyển chuột

Mỗi lần vị trí con trỏ thay đổi trên phần tử đang theo dõi, onmousemove có thể được gọi lại. Vì vậy, những tác vụ nặng như tính toán phức tạp, thay đổi nhiều phần tử hoặc cập nhật giao diện liên tục nên được hạn chế.

Với các hiệu ứng cần phản hồi theo vị trí chuột, nên chỉ xử lý những dữ liệu thực sự cần thiết. Nếu phải thực hiện nhiều thao tác liên tiếp, có thể cân nhắc kỹ thuật giới hạn tần suất xử lý để tránh làm trình duyệt phải làm việc quá nhiều.

Phân biệt onmousemove với onmouseover và onmouseenter

Ba sự kiện này đều liên quan đến thao tác di chuyển chuột nhưng mục đích sử dụng khác nhau. onmousemove phù hợp khi cần theo dõi vị trí con trỏ trong quá trình di chuyển. Trong khi đó, onmouseover thường được dùng để phát hiện con trỏ đi vào phần tử và có thể tiếp tục phát sinh khi con trỏ đi qua phần tử con.

onmouseenter cũng dùng để nhận biết thời điểm con trỏ đi vào một phần tử nhưng không phát sinh theo cách tương tự khi di chuyển giữa các phần tử con. Vì vậy, nếu chỉ cần thực hiện một hành động khi người dùng đưa chuột vào vùng xác định, onmouseenter thường phù hợp hơn việc theo dõi liên tục bằng onmousemove.

Khi nào nên dùng mousemove thay cho onmousemove?

Trong JavaScript hiện đại, mousemove thường được ưu tiên khi đăng ký sự kiện bằng addEventListener(). Cách này tách phần xử lý sự kiện khỏi thuộc tính HTML, giúp mã dễ quản lý hơn khi một phần tử cần nhiều loại sự kiện.

Ví dụ, thay vì gắn trực tiếp sự kiện vào thuộc tính của phần tử, có thể đăng ký bằng JavaScript:

const box = document.querySelector('.box');

box.addEventListener('mousemove', function(event) {
    console.log(event.clientX, event.clientY);
});

Cách viết này đặc biệt hữu ích khi dự án có nhiều tương tác, cần tổ chức mã JavaScript riêng hoặc muốn dễ dàng thêm và gỡ trình xử lý sự kiện khi cần.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Sự kiện onmousemove trong JavaScript.