Javascript has methods to simulate user interactions like .click(), .focus(), .blur(). But no .hover(). Can JS simulate a hover / mouseover?

Question

Javascript enables user interactions to be simulated.

Any script can simulate a user interaction like click or focus on a specific element on the page, by using the methods .click() and .focus().

Example:

const square = document.getElementsByClassName('square')[0];

const clickSquare = () => {

  event.target.dataset.receivedAction = 'click';
  event.target.innerHTML = '<p>I\'ve been clicked!</p>';
}

const clearSquare = () => {

  square.removeAttribute('data-received-action');
  square.innerHTML = '';
}

square.addEventListener('click', clickSquare, false);

const clickButton = document.querySelector('[data-deliver-action="click"]');
const clearButton = document.querySelector('[data-deliver-action="clear"]');

clickButton.addEventListener('click', () => square.click(), false);
clearButton.addEventListener('click', clearSquare, false);

.square {
display: block;
width: 120px;
height: 120px;
margin: 12px 6px;
text-align: center;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
overflow: hidden;
cursor: pointer;
}

button {
display: block;
width: 160px;
margin: 6px;
cursor: pointer;
}

.square {
color: rgb(255, 0, 0);
background-color: rgb(255, 0, 0);
}

.square[data-received-action="click"] {
background-color: rgb(255, 255, 0);
}

<div class="square" tabindex="0"></div>

<button type="button" data-deliver-action="click">Click the Square</button>
<button type="button" data-deliver-action="clear">Clear Square</button>

The square above listens for a click event. We can either click on the square directly or we can press the Click the Square button which then clicks on the square itself via the .click() method.

Either action results in the square receiving a click event.

But this is only possible because the .click() method exists.

A .hover() (or even .mouseover()) method would also be useful, but it doesn't exist.

Is it possible to computationally simulate a hover (or a mouseover) in the absence of these methods?

Answer 1

This appears not to be widely documented across the web, but it is possible to computationally simulate a human moving a mouse pointer over an element in the same way that element.click() simulates a human clicking on an element.

The correct approach is to use:

eventTarget.dispatchEvent(event)

in combination with a JS-native event.

Most references to dispatchEvent() involve a custom-written event, but, to reiterate, it is possible to use a JS-native event - in this case mouseover.

So... instead of the following, utilising the .click() method:

clickButton.addEventListener('click', () => square.click(), false);

We can deploy:

clickButton.addEventListener('click', () => {

  let hover = new Event('mouseover');
  square.dispatchEvent(hover);

}, false);

Working Example:

const square = document.getElementsByClassName('square')[0];

const clickSquare = () => {

  event.target.dataset.receivedAction = 'click';
  event.target.innerHTML = '<p>I\'ve been clicked!</p>';
}

const hoverSquare = () => {

  event.target.dataset.receivedAction = 'hover';
  event.target.innerHTML = '<p>I\'ve been hovered over!</p>';
}

const clearSquare = () => {

  square.removeAttribute('data-received-action');
  square.innerHTML = '';
}

square.addEventListener('mouseover', hoverSquare, false);
square.addEventListener('click', clickSquare, false);

const clickButton = document.querySelector('[data-deliver-action="click"]');
const hoverButton = document.querySelector('[data-deliver-action="hover"]');
const clearButton = document.querySelector('[data-deliver-action="clear"]');

clickButton.addEventListener('click', () => square.click(), false);

hoverButton.addEventListener('click', () => {

  let hover = new Event('mouseover');
  square.dispatchEvent(hover);

}, false);

clearButton.addEventListener('click', clearSquare, false);

.square {
display: block;
width: 120px;
height: 120px;
margin: 12px 6px;
text-align: center;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
overflow: hidden;
cursor: pointer;
}

button {
display: block;
width: 160px;
margin: 6px;
cursor: pointer;
}

.square {
color: rgb(255, 0, 0);
background-color: rgb(255, 0, 0);
}

.square[data-received-action="click"] {
background-color: rgb(255, 255, 0);
}

.square[data-received-action="hover"] {
color: rgb(255, 255, 255);
background-color: rgb(255, 125, 0);
}

<div class="square" tabindex="0"></div>

<button type="button" data-deliver-action="click">Click the Square</button>
<button type="button" data-deliver-action="hover">Hover over the Square</button>
<button type="button" data-deliver-action="clear">Clear Square</button>