Sự kiện onmouseover trong JavaScript

• Trần Thị Vân
• 1088
• 25/08/2025

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

Sự kiện onmouseover 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 onmouseover trong JavaScript

Sự kiện onmouseover gắn trực tiếp trong JavaScript

onmouseover="doiMau()"

<div id="kvuong" onmouseover="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 onmouseover không gắn trực tiếp trong JavaScript

kvuong.onmouseover = 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.onmouseover = function(){
kvuong.style.background = 'green';
};

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

Chạy Thử

Khi Nào Nên Sử Dụng Sự Kiện onmouseover?

onmouseover phù hợp khi một thao tác cần được kích hoạt ngay lúc con trỏ chuột di chuyển vào một phần tử trên trang. Sự kiện này thường được dùng cho các tương tác trực quan như thay đổi nội dung, hiển thị thông tin bổ sung hoặc tạo hiệu ứng khi người dùng đưa chuột lên một khu vực.

Dùng onmouseover để tạo tương tác khi rê chuột

Một ưu điểm của onmouseover là có thể tạo phản hồi gần như ngay lập tức mà không yêu cầu người dùng nhấp chuột. Chẳng hạn, khi rê chuột lên một sản phẩm, website có thể hiển thị thêm mô tả hoặc thay đổi nội dung của vùng đang được xem.

Với những giao diện có nhiều thành phần tương tác, nên giới hạn xử lý ở những trường hợp thực sự cần thiết. Nếu chỉ muốn thay đổi giao diện đơn giản, CSS thường là lựa chọn nhẹ và phù hợp hơn JavaScript.

onmouseover khác gì với onmouseenter và onmousemove?

Các sự kiện này đều liên quan đến hoạt động của chuột nhưng thời điểm kích hoạt khác nhau. onmouseover được kích hoạt khi con trỏ đi vào phần tử và có thể tiếp tục phát sinh khi con trỏ chuyển qua các phần tử con bên trong. onmouseenter tập trung vào thời điểm con trỏ đi vào chính phần tử đó và không phát sinh lại do di chuyển qua phần tử con.

Trong khi đó, onmousemove được dùng khi cần theo dõi chuyển động của con trỏ trong khu vực phần tử. Vì vậy, nếu chỉ cần biết người dùng vừa đưa chuột vào một vùng, onmouseenter thường dễ kiểm soát hơn. Nếu cần xử lý chuyển động liên tục của chuột, onmousemove mới là lựa chọn phù hợp.

Những trường hợp không nên dùng onmouseover

Không nên sử dụng onmouseover cho mọi hiệu ứng liên quan đến chuột. Với hiệu ứng hình ảnh đơn giản như đổi màu, thay đổi độ trong suốt hoặc chuyển trạng thái khi rê chuột, CSS giúp mã nguồn gọn hơn và giảm lượng JavaScript phải xử lý.

Ngoài ra, cần thận trọng khi đặt onmouseover trên phần tử chứa nhiều phần tử con. Việc con trỏ di chuyển qua các phần tử bên trong có thể khiến hàm xử lý được gọi nhiều lần ngoài mong muốn. Trong trường hợp chỉ cần phát hiện một lần khi con trỏ bước vào vùng, có thể cân nhắc onmouseenter để hành vi rõ ràng hơn.

Lời kết

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