Manually triggering events

by Sara Winter

HTML

<div>
  <div id="myMouseOver">
    Mouse over
  </div>
</div>
<div id="myTrigger">
  Trigger
</div>

CSS

#myMouseOver {
  background-color: green;
}
#myMouseOver.red {
  background-color: red;
}

JavaScript

const myMouseOver = document.getElementById('myMouseOver');
const myTrigger = document.getElementById('myTrigger');


myMouseOver.addEventListener("mouseover", hover);

function hover() {
	myMouseOver.classList.toggle('red');
}

const mouseoverEvent = new Event('mouseover');

myTrigger.addEventListener("mouseover", function(){
	myMouseOver.dispatchEvent(mouseoverEvent);
});