CODEWITHSUNDEEP
javascripthtmlmouseevent
Kirill
Kirill

Reputation: 37

Mousemove event after Onclick event

I have the similar problem but I'm using pure js. By my understanding after I clicked on the div it should start print 'Mousemove event has occurred' into the console every time I move the cursor over the div but actually it happens only once when I click the div which is weird as well because click is not a mosemove. Can you please help me to understand this behavior?

<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>
Looks like it ignores this part div.addEventListener('onmousemove', handleMove(event)); and executes handleMove(event); instead:

<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>

Update: I was thinking to pass handleMove without () but got confused by Atom IDE (due to pale highlight), so do not let Atom confuse you!

Upvotes: 3

Views: 3792

Answers (3)

yajiv
yajiv

Reputation: 2941

If you look at the syntax of addEventListener which is document.addEventListener(event, function, useCapture) here for parameter event clearly mention that(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".

So replace 'onmousemove' to '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>

Upvotes: 0

Uri Chachick
Uri Chachick

Reputation: 432

the event listener should be "mousemove" and not "onmousemove". something like this:

<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>

Upvotes: 0

S&#233;bastien
S&#233;bastien

Reputation: 12139

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

Yes, because it is what you wrote ;)

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

The above executes the handleMove function passing it the event.

Compare it to actually just creating an event handler (no parenthesis after 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>

Also: the event is mousemove not onmousemove.

Upvotes: 2

Related Questions