Question

基本上是一个切换。我有这个按钮：

<button id='btn'>Hover, don't click</button>

这是js：

function changeColor () {
    document.getElementById('btn').style.color = 'red';
}

现在：

document.getElementById('btn').addEventListener('mouseover', changeColor);

按照命令工作，但是：

document.getElementById('btn').removeEventListener('mouseout', changeColor);

逆反。 JS Fiddle认为所有行为都正确：http://jsfiddle.net/jimges/roq9x1os/

我不同意。谢谢！

Answer 1

试试这个：

Fiddle

var btn = document.getElementById('btn')
btn.onmouseover = function changeColor() {
    document.getElementById('btn').style.color = "#ff1033";
}
btn.onmouseleave = function changeColor() {
    document.getElementById('btn').style.color = "#fff";
}

或者使用CSS更容易：

Fiddle

#btn {
    color: #ff1033;
}
#btn:hover {
    color: #fff;
}

Answer 2

使用onmouseover或css要容易得多，但如果您仍想使用添加事件监听器来执行此操作，则必须认为add将附加该函数，remove将从元素中删除它。

在任何情况下，您必须添加两个独立的事件。

示例：

var element=document.getElementById('btn');
var changeColorA = function () {
    document.getElementById('btn').style.color = "#ff1033";

}
var changeColorB = function () {
            document.getElementById('btn').style.color = "#000";
}
element.addEventListener('mouseover', changeColorA);
element.addEventListener('mouseout', changeColorB);

同样，我不建议您使用此代码，仅用于教育目的。

使用CSS

基本删除事件监听器Javascript

2 个答案:

Fiddle

Fiddle