17
rated 0 times
[
21]
[
4]
/ answers: 1 / hits: 6303
/ 5 Years ago, sat, november 2, 2019, 12:00:00
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?
More From » dom-events
