jQuery — Mouse Events and Multiple Selections

Photo by Ricky Kharawala on Unsplash

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.mousemove()

The .mousemove() method lets us add an event listener for the mousemove event or trigger it.

For example, if we have:

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

Then we can listen to the mouswdown event on the div with ID target by writing:

$("#target").mousemove(function() {
  console.log("Handler for .mouseleave() called.");
});

Also, we can trigger then mousedown event on the div with ID target when we click on the div with ID other by writing:

$("#target").mousemove(function() {
  console.log("Handler for .mouseleave() called.");
});
$("#other").click(function() {
  $("#target").mousemove();
});

.mouseout()

The .mouseout() method lets us add an event listener for the mouseout event or trigger it.

For example, if we have:

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>