Sự kiện onmouseout trong JavaScript

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

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

Sự kiện onmouseout trong JavaScript dùng để tạo sự kiện sau khi người dùng bỏ rê chuột khỏi thẻ HTML.

Code Sự kiện onmouseout trong JavaScript

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

onmouseout="doiMau()"

<div id="kvuong" onmouseout="doiMau()">Rê vào, rê ra</div>

<script>
function doiMau(){
var kvuong = document.getElementById('kvuong');
kvuong.style.background = 'green';
}
</script>

Chạy Thử

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

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

<div id="kvuong" >Rê vào, Rê ra</div>
<div id="kvuong2" >Rê vào, Rê ra</div>

<script>
var kvuong = document.getElementById('kvuong');
kvuong.onmouseout = function(){
kvuong.style.background = 'green';
};

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

Chạy Thử

Phân biệt onmouseout với các sự kiện chuột khác

Khi xử lý tương tác chuột trong JavaScript, onmouseout dễ bị nhầm với những sự kiện có chức năng gần giống. Điểm khác biệt chủ yếu nằm ở thời điểm sự kiện được kích hoạt và cách trình duyệt xử lý phần tử con. Hiểu rõ từng trường hợp sẽ giúp lựa chọn sự kiện phù hợp, tránh việc một thao tác chuột làm chạy hàm nhiều lần ngoài mong muốn.

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

onmouseover được kích hoạt khi con trỏ chuột di chuyển vào một phần tử, trong khi onmouseout được kích hoạt khi con trỏ rời khỏi phần tử đó. Hai sự kiện thường được sử dụng theo cặp khi xây dựng hiệu ứng tương tác như đổi màu, hiển thị thông tin hoặc thay đổi trạng thái nút.

Ví dụ, khi con trỏ đi vào một nút, có thể dùng onmouseover để thay đổi giao diện. Khi con trỏ rời khỏi nút, onmouseout có thể đưa giao diện về trạng thái ban đầu.

<button onmouseover="this.style.backgroundColor='orange'" onmouseout="this.style.backgroundColor='white'">Di chuyển chuột vào đây</button>

Một điểm cần chú ý là onmouseout và onmouseover có thể phản ứng khi con trỏ di chuyển giữa phần tử cha và phần tử con. Vì vậy, nếu giao diện có nhiều phần tử lồng nhau, việc sử dụng chúng không đúng cách có thể khiến hàm xử lý được gọi nhiều lần.

Onmouseout và onmouseleave có gì khác biệt?

onmouseout phản ứng khi con trỏ rời khỏi phần tử hoặc di chuyển từ phần tử sang một phần tử con. Trong khi đó, onmouseleave chỉ được kích hoạt khi con trỏ thực sự rời khỏi toàn bộ phần tử, không bị kích hoạt liên tục khi di chuyển qua các phần tử con bên trong.

Điểm khác biệt này đặc biệt quan trọng với các thành phần có cấu trúc phức tạp. Nếu chỉ muốn xác định thời điểm người dùng rời khỏi toàn bộ một vùng nội dung, onmouseleave thường dễ kiểm soát hơn.

Ngược lại, onmouseout phù hợp khi cần nhận biết chi tiết việc con trỏ rời khỏi từng phần tử trong quá trình tương tác. Việc lựa chọn sự kiện nên dựa vào hành vi thực tế cần xử lý thay vì chỉ dựa vào tên của sự kiện.

Khi nào nên sử dụng onmouseout trong website?

onmouseout nên được sử dụng khi website cần thực hiện một hành động ngay sau khi con trỏ rời khỏi một phần tử. Một số trường hợp phù hợp gồm khôi phục trạng thái giao diện, ẩn nội dung phụ, kết thúc hiệu ứng hoặc cập nhật trạng thái của thành phần đang được tương tác.

Với những vùng có nhiều phần tử con, cần kiểm tra kỹ luồng di chuyển của con trỏ trước khi chọn onmouseout. Nếu mục tiêu chỉ là phát hiện người dùng rời khỏi toàn bộ một khu vực, onmouseleave có thể là lựa chọn đơn giản và ổn định hơn.

Quan trọng nhất là xác định chính xác phạm vi cần theo dõi. Chọn đúng sự kiện ngay từ đầu sẽ giúp mã JavaScript dễ đọc, hạn chế việc xử lý dư thừa và tạo trải nghiệm tương tác nhất quán trên website.

Lời kết

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