Tự động thay đổi onmouseover hoặc onmouseout để gọi một chức năng khác nhau

Question

Có thể thay đổi một hàm được gọi bởi sự kiện onmouseover hoặc onmouseout hiện có không? Đối với ví dụ sau là có một cách để tôi có ChangeItemAEvent thay đổi chức năng onmouseover "ItemA" từ ChangeColor() thành ChangeColorBack()? Hiện tại tôi cần khai báo một hàm hoàn toàn mới() mà tôi cảm thấy không thanh lịch vì tôi lặp lại mã khi tôi có thể gọi hàm hiện có.

javascript:

function ChangeColor(elementid) 
{ 
    document.getElementById(elementid).style.background = "Orange"; 
    document.getElementById(elementid).style.color = "Black"; 
} 

function ChangeColorBack(elementid) 
{ 
    document.getElementById(elementid).style.background = "Black"; 
    document.getElementById(elementid).style.color = "White"; 
} 

function ChangeItemAEvent() 
{ 
    document.getElementById("ItemA").onmouseover = function() { 

    document.getElementById("ItemA").style.background = "Black"; 
    document.getElementById("ItemA").style.color = "White"; 

    }; 
} 

html:

<span id="ItemA" onmouseover="ChangeColor(this.id)"> 
<button id="ButtonB" onclick="ChangeItemAEvent()"> 

Answer 1

Hãy thử điều này

function ChangeItemAEvent() 
{ 
    document.getElementById("ItemA").onmouseover = function() {ChangeColorBack(this.id)}; 
} 

Answer 2

Có thể thay đổi một chức năng mà được gọi bằng một sự kiện onmouseover hiện có hoặc onmouseout ?

Có, bằng cách viết thư cho thuộc tính DOM element.onmouseover, với giá trị hàm. Đây có thể là tên hàm hoặc biểu thức hàm nội tuyến.

Nếu bạn làm tất cả những kịch bản của bạn bằng cách viết để tính xử lý sự kiện (hoặc thêm người nghe sự kiện), bạn có thể tận dụng this trỏ đến phần tử và tránh đi ngang qua ID, mà làm cho nó dễ dàng hơn:

<span id="ItemA"> 
<button type="button" id="ButtonB"> 

<script type="text/javascript"> 
    function ChangeColor() { 
     this.style.background= 'orange'; 
     this.style.color= 'black'; 
    } 

    function ChangeColorBack(elementid) { 
     this.style.background= 'black'; 
     this.style.color= 'white'; 
    } 

    document.getElementById('ItemA').onmouseover= ChangeColor; 
    document.getElementById('ButtonB').onclick= function() { 
     document.getElementById('ItemA').onmouseover= ChangeColorBack; 
    }; 
</script> 

Tuy nhiên đối với loại công việc di chuột và chọn này, bạn thường nên sử dụng các biến trạng thái hoặc CSS thay vì gán lại các trình xử lý sự kiện. Ví dụ một cái gì đó như:

#ItemA:hover { background: orange; color: black; } 
#ItemA.selected:hover { background: black; color: white; } 

document.getElementById('ButtonB').onclick= function() { 
    var a= document.getElementById('ItemA'); 
    a.className= a.className==='selected'? '' : 'selected'; 
}; 

(:hover trên một khoảng không làm việc trong IE6, vì vậy nếu bạn cần phải chắc rằng trình duyệt di chuột-nổi bật bạn sẽ phải có onmouseover/mouseout mã để thêm hoặc loại bỏ một .hover className.)