Onclick 事件后的 Mousemove 事件

Question

我有 similar problem 但我使用的是纯 js。根据我的理解，在我点击 div 之后，每次我将光标移到 div 上时，它应该开始打印 'Mousemove event has occurred' 到控制台，但实际上当我点击 [=] 时它只发生一次35=] 这也很奇怪，因为点击不是 mosemove。你能帮我理解这种行为吗？

<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 函数传递给它 event.

将其与实际创建事件处理程序进行比较（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 not onmousemove。

Answer 2

事件侦听器应该是 "mousemove" 而不是 "onmousemove"。像这样：

<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('mousemove', function(event) { handleMove(event) });
    }

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

Answer 3

如果您查看参数 event 的 addEventListener 语法 document.addEventListener(event, function, useCapture)，请清楚地提及 (here)

Required. A String that specifies the name of the event.

Note: Do not use the "on" prefix. For example, use "click" instead of "onclick".

所以将'onmousemove'替换为'mousemove'

<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('mousemove', handleMove);
    }

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

Onclick 事件后的 Mousemove 事件

Mousemove event after Onclick event

html

javascript

mouseevent