Javascript addEventListener - sử dụng để tạo hiệu ứng di chuột?

Question

Tôi có một div có id là "button". Tôi đang cố gắng thay đổi nền của nó để trở thành màu xanh khi tôi di chuột (không sử dụng bộ chọn di chuột CSS).

var item = document.getElementById("button"); 
item.addEventListener("mouseover", func, false); 

function func() 
{ 
    var item = document.getElementById("button"); 
    item.setAttribute("style", "background-color:blue;") 
} 

Điều này, tuy nhiên, chỉ đặt màu thành mục màu xanh khi tôi di chuột nhưng không đặt lại thành màu trắng sau khi di chuyển chuột. Làm thế nào tôi có thể sửa lỗi này? (btw, mouseenter và mouseleave không làm việc với điều này dường như).

Answer 1

Bạn sẽ cần thiết lập sự kiện tương tự để xử lý mouseout. Bên trong hàm sự kiện mouseout, bạn có thể thay đổi màu trở về màu gốc.

var item = document.getElementById("button"); 
item.addEventListener("mouseover", func, false); 
item.addEventListener("mouseout", func1, false); 

function func() 
{ // not needed since item is already global, 
    // I am assuming this is here just because it's sample code? 
    // var item = document.getElementById("button"); 
    item.setAttribute("style", "background-color:blue;") 
} 

function func1() 
{ 
    item.setAttribute("style", "background-color:green;") 
} 

Answer 2

Bạn đã thử mouseout chưa?

(Thật không may sự kiện "di chuột" đã được đặt tên kém - nó sẽ tốt hơn nếu nó được gọi là "mousein" sao cho rõ ràng hơn và trực quan ngược lại với "mouseout". Nhưng đó chỉ là một trong nhiều những sự kiện không phù hợp.)

Tôi nghĩ rằng trình điều khiển chuột và mouseleave là những thứ mà trình duyệt IE có thể không hỗ trợ - mặc dù tôi nghĩ jQuery cũng hỗ trợ các sự kiện đó.