使用addEventListener javascript添加后，removeEventListener（）不会删除函数

Question

我使用addEventListener()添加了一个mouseover函数，并尝试使用removeEventListener()在mouseout上将其删除。 添加功能可以正常工作，但不会在mouseout上删除。

这里的代码有什么问题？ 如何修改以删除该功能？

    var elem = document.getElementById('a');

function highLight() {

var p = document.getElementById('p');
var strong = p.getElementsByTagName('strong');
for(var i = 0; i < strong.length; i++) {
     strong[i].style.color = 'red';
}   

}
elem.addEventListener('mouseover', highLight, false);

elem.removeEventListener('mouseout', highLight, false);

Answer 1

我猜想重点是删除红色，而不是真正删除eventListener

var elem = document.getElementById('a');

function highLight() {
    var p = document.getElementById('p');
    var strong = p.getElementsByTagName('strong');
    for (var i = 0; i < strong.length; i++) {
        strong[i].style.color = 'red';
    }
}

function unhighLight() {
    var p = document.getElementById('p');
    var strong = p.getElementsByTagName('strong');
    for (var i = 0; i < strong.length; i++) {
        strong[i].style.color = 'black';
    }
}


elem.addEventListener('mouseenter', highLight, false);

elem.addEventListener('mouseleave', unhighLight, false);

小提琴

Answer 2

如果我正确理解，我认为您想在“ mouseover”事件下方添加一个“ mouseout”事件，然后在“ mouseout”的回调函数中都将其删除。

也就是说，更像这样：

elem.addEventListener('mouseover', highLight, false);
elem.addEventListener('mouseout', function () {
    elem.removeEventListener('mouseover');
    elem.removeEventListener('mouseout');
}, false);