Javascript 动态更改 onmouseover 或 onmouseout 以调用不同的函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3946698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically change onmouseover or onmouseout to call a different function
提问by EverTheLearner
Is it possible to change a function that is called by an existing onmouseover or onmouseout event? For the following example is there a way for me to have ChangeItemAEvent change the "ItemA" onmouseover function from ChangeColor() to ChangeColorBack()? Currently I need to declare an entirely new function() that I feel is not elegant because I am repeating code when I should be able to call an existing function.
是否可以更改由现有 onmouseover 或 onmouseout 事件调用的函数？对于以下示例，我是否可以让 ChangeItemAEvent 将“ItemA”onmouseover 函数从 ChangeColor() 更改为 ChangeColorBack()？目前我需要声明一个我觉得不优雅的全新 function() 因为当我应该能够调用现有函数时我正在重复代码。
javascript:
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:
html：
<span id="ItemA" onmouseover="ChangeColor(this.id)">
<button id="ButtonB" onclick="ChangeItemAEvent()">
回答by Bryan Field
Try this
尝试这个
function ChangeItemAEvent()
{
document.getElementById("ItemA").onmouseover = function() {ChangeColorBack(this.id)};
}
回答by bobince
Is it possible to change a function that is called by an existing onmouseover or onmouseout event?
是否可以更改由现有 onmouseover 或 onmouseout 事件调用的函数？
Yes, by writing to the DOM element.onmouseoverproperty, with a function value. This can be a function name or an inline function expression.
是的，通过element.onmouseover使用函数值写入 DOM属性。这可以是函数名称或内联函数表达式。
If you do all your scripting by writing to event handler properties (or adding event listeners) you can take advantage of thispointing to the element and avoid passing around IDs, which makes it easier:
如果您通过写入事件处理程序属性（或添加事件侦听器）来完成所有脚本编写，您可以利用this指向元素并避免传递 ID，这使得它更容易：
<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>
However for this sort of hover-and-select work you are usually better off using state variables or CSS instead of re-assigning event handlers. For example something like:
然而，对于这种悬停和选择工作，您通常最好使用状态变量或 CSS，而不是重新分配事件处理程序。例如类似的东西：
#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';
};
(:hoveron a span doesn't work in IE6, so if you need to make that browser hover-highlight you would have to have onmouseover/mouseoutcode to add or remove a .hoverclassName.)
（:hover跨度在 IE6 中不起作用，因此如果您需要使该浏览器悬停突出显示，则必须使用onmouseover/mouseout代码来添加或删除.hoverclassName。）
