Javascript 当'；鼠标输出'；发生

我不知道为什么在

mouseout

事件发生时无法删除

EventListener

。 当一个表行悬停时，我想激活

EventListener（'keydown'）

。原因是我想使用“delete”键，在悬停行时删除悬停行。 我假设问题可能是由以下事实引起的：

keydown

事件附加到

文档

而不是执行它的特定元素。然而，将它添加到某个元素不是不可能吗

    var table = document.querySelector('tbody');
    var rows = table.querySelectorAll('tr');

    for (i = 0; i < rows.length; i++) 
    {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row, showHide) 
            {
                return function() 
                { 
                    console.log('showHide ',showHide);
                    if (showHide === 'hover' )
                    {
                        document.addEventListener('keydown' ,function(ev)
                        {
                            if (showHide == 'hover')
                            {
                                console.log('hover target ', ev.target);
                            }
                        },false);
                        return;
                    }

                    else if (showHide === 'leave')
                    {
                        document.removeEventListener('keydown' ,function(ev)
                        {
                            if (ev.target && showHide === 'leave')
                            {
                                console.log('out ',ev);
                            }

                        },false);                           
                        console.log('left');
                    }
                 };
            };
        currentRow.addEventListener('mouseover', createClickHandler(currentRow, 'hover'), false);
        currentRow.addEventListener('mouseout', createClickHandler(currentRow, 'leave'), false);
    }

应使用添加了

addEventListener

的侦听器调用，而不是使用新函数。实际上，您是在告诉

document

删除一个从未添加过的侦听器

这样做：

var listener=document.addEventListener（'keydown'，function（e）{…}）；
document.removeEventListener（'keydown'，listener）；

---

编辑：工作示例

var table=document.querySelector（'tbody'）；
var rows=table.querySelectorAll（'tr'）；
var log=document.getElementById（'log'）；
对于（i=0；i

第1行
第2排
第3排
应使用添加了
addEventListener的侦听器调用，而不是使用新函数。实际上，您是在告诉
document
删除一个从未添加过的侦听器

这样做：

var listener=document.addEventListener（'keydown'，function（e）{…}）；
document.removeEventListener（'keydown'，listener）；


编辑：工作示例


var table=document.querySelector（'tbody'）；
var rows=table.querySelectorAll（'tr'）；
var log=document.getElementById（'log'）；
对于（i=0；i

第1行
第2排
第3排
Ok，但我应该在哪里执行
removeEventListener
？当我像你们展示的那样添加它时（在listener之后），它不起作用。我试着把它放在
监听器中，但它也不起作用。请参阅我的最新答案。这只是基于您的示例的一个开始，您可能需要修改它以满足您的需要。当鼠标不在元素范围内时，您的代码段不会关闭
keydown
事件。因此，即使执行了
mouseout
事件，它仍在侦听
keydown
事件，这是我不想听到的。我希望
keydown
事件仅在
mouseover
处于活动状态时执行。当鼠标处于关闭状态时，不应执行元素
keydown
。让它适合你的需要是一个练习；）。为什么如果我
console.log（listener）
，它会说
undefined
，无论我把这个console.log放在哪里？好的，但是我应该在哪里执行
removeEventListener
？当我像你们展示的那样添加它时（在listener之后），它不起作用。我试着把它放在
监听器中，但它也不起作用。请参阅我的最新答案。这只是基于您的示例的一个开始，您可能需要修改它以满足您的需要。当鼠标不在元素范围内时，您的代码段不会关闭
keydown
事件。因此，即使执行了
mouseout
事件，它仍在侦听
keydown
事件，这是我不想听到的。我希望
keydown
事件仅在
mouseover
处于活动状态时执行。当鼠标处于关闭状态时，不应执行元素
keydown
。让它适合你的需要是一个练习；）。为什么如果我
console.log（listener）
，无论我在哪里放置这个console.log，它都会显示
undefined
？
var table = document.querySelector('tbody');
        var rows = table.querySelectorAll('tr');

    for (i = 0; i < rows.length; i++) 
    {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row, showHide) 
            {
                return function() 
                { 
                    var delKey = function(ev)
                    {
                        console.log('hover target ', ev.target);
                    };

                    console.log('showHide ',showHide);
                    if (showHide === 'hover' )
                    {
                        //console.log('hovered ',row);

                        document.addEventListener('keydown' ,delKey,false);
                        document.addEventListener('keyup' ,function(){
                            document.removeEventListener('keydown',delKey,false);
                            console.log('removed event ');
                        },false);

                        document.body.addEventListener('click', function()
                        {
                            document.removeEventListener('keydown', delKey, false);
                        },false);
                    }

                    else if (showHide === 'leave')
                    {
                        console.log('hidden ');
                    }
                };
            };
        currentRow.addEventListener('mouseover', createClickHandler(currentRow, 'hover'), false);
        currentRow.addEventListener('mouseout', createClickHandler(currentRow, 'leave'), false);
    }