javascript - Onclick 事件之后的 Mousemove 事件

Question

我有similar problem但我用的是纯js。根据我的理解，在我单击 div 后，每次我将光标移到 div 上时，它应该开始在控制台中打印“Mousemove 事件已发生”，但实际上当我单击 div 时，它只发生一次，这也很奇怪，因为单击是不是莫斯移动。您能帮我理解这种行为吗？

<div style="width:100px; height:100px; border:solid black 1px" onclick="handleClick(event)"></div>
  <script>
    let div = document.getElementsByTagName('div')[0];

    function handleClick(event){
      div.addEventListener('onmousemove', handleMove(event));
    }

    function handleMove(event){
      console.log('Mousemove event has occurred');
    }
  </script>

看起来它忽略了这部分 div.addEventListener('onmousemove', handleMove(event)); 并执行 handleMove(event); :

<div style="width:100px; height:100px; border:solid black 1px" onclick="handleClick(event)"></div>
  <script>
    let div = document.getElementsByTagName('div')[0];

    function handleClick(event){
      handleMove(event);
    }

    function handleMove(event){
      console.log('Mousemove event has occurred');
    }
</script>

更新:我想在没有 () 的情况下传递 handleMove 但被 Atom IDE 搞糊涂了(由于浅色突出显示)，so do not let Atom confuse you!

Answer 1

Looks like it ignores this part div.addEventListener('onmousemove', handleMove(event)); and executes handleMove(event); instead:

是的，因为这是你写的;)

div.addEventListener('onmousemove', handleMove(event));

上面执行 handleMove 函数，并向其传递事件。

将其与实际创建的事件处理程序进行比较(handleMove 后没有括号):

<div style="width:100px; height:100px; border:solid black 1px" onclick="handleClick(event)"></div>
<script>
    let div = document.getElementsByTagName('div')[0];

    function handleClick(event){
      console.log(`handleClick`);
      div.addEventListener('mousemove', handleMove);
    }

    function handleMove(event){
      console.log('Mousemove event has occurred');
    }
</script>

另外:该事件是 mousemove不是onmousemove .