Sự kiện onmouseenter trong JavaScript

• Trần Thị Vân
• 1144
• 28/08/2025

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

Sự kiện onmouseenter trong JavaScript dùng để tạo ra sự kiện khi rê chuột vào một thẻ HTML, sự kiện chỉ làm việc khi rê chuột vào còn sau đó thì không làm gì nữa.

Code Sự kiện onmouseenter trong JavaScript

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

onmouseenter="doiMau()"

<div id="kvuong" onmouseenter="doiMau()">Rê chuột vào</div>
<script>
function doiMau(){
var kvuong = document.getElementById('kvuong');
kvuong.style.background = 'green';
}
</script>

Chạy Thử

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

kvuong.onmouseenter = function(){
  kvuong.style.background = 'green';
};

<div id="kvuong" >Rê chuột vào</div>
<div id="kvuong2" >Rê chuột vào</div>
<script>
var kvuong = document.getElementById('kvuong');
kvuong.onmouseenter = function(){
kvuong.style.background = 'green';
};

var kvuong2 = document.getElementById('kvuong2');
kvuong2.addEventListener('mouseenter', function(){
kvuong2.style.background = 'green';
});
</script>

Chạy Thử

Phân biệt onmouseenter với onmouseover trong JavaScript

onmouseenter và onmouseover đều có thể dùng để xử lý hành động khi người dùng đưa chuột vào một phần tử. Tuy nhiên, cách chúng phản ứng với các phần tử con bên trong lại khác nhau. Hiểu rõ điểm này sẽ giúp bạn chọn đúng sự kiện và tránh việc một đoạn mã bị thực thi nhiều lần ngoài ý muốn.

onmouseenter và onmouseover khác nhau như thế nào?

Điểm khác biệt quan trọng nằm ở phạm vi kích hoạt sự kiện. onmouseenter chỉ được kích hoạt khi con trỏ chuột đi vào chính phần tử đang được gắn sự kiện. Khi chuột di chuyển giữa phần tử cha và các phần tử con bên trong, sự kiện này không liên tục phát sinh lại chỉ vì con trỏ đi qua các phần tử con.

Trong khi đó, onmouseover có thể được kích hoạt khi con trỏ đi vào phần tử hoặc di chuyển từ phần tử này sang phần tử con. Vì vậy, với một khu vực có nhiều phần tử lồng nhau, onmouseover có thể tạo ra nhiều lần xử lý hơn bạn dự kiến.

Ví dụ, một hộp có chứa nội dung bên trong:

<div onmouseenter="hienThongBao()">
  <p>Đưa chuột vào khu vực này</p>
</div>

Khi con trỏ đi vào hộp div, onmouseenter được kích hoạt. Việc con trỏ tiếp tục di chuyển vào phần tử p bên trong không khiến sự kiện của div bị kích hoạt lại theo cách tương tự onmouseover.

Đây là lý do onmouseenter thường phù hợp hơn khi mục tiêu chỉ đơn giản là phát hiện thời điểm người dùng bắt đầu đưa chuột vào một khu vực cụ thể.

Nên dùng onmouseenter trong trường hợp nào?

Nên ưu tiên onmouseenter khi bạn muốn thực hiện một hành động duy nhất tại thời điểm người dùng đưa chuột vào một phần tử, chẳng hạn như hiển thị thông tin bổ sung, thay đổi trạng thái giao diện hoặc mở một khu vực tương tác.

Đặc biệt, sự kiện này hữu ích với các thành phần có nhiều nội dung hoặc phần tử con, nơi việc kích hoạt lại xử lý khi chuột di chuyển qua từng thành phần có thể gây ra hành vi không cần thiết.

Nếu nhu cầu của bạn là theo dõi chi tiết quá trình di chuyển chuột qua các phần tử bên trong, onmouseover có thể phù hợp hơn. Ngược lại, nếu chỉ quan tâm đến thời điểm chuột bước vào một phần tử, onmouseenter thường là lựa chọn rõ ràng và dễ kiểm soát hơn.

Lời kết

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