How to add an event listener to elements (or children)

Question

I'm using a Syncfusion plugin to render a PDF in a React project. But I need an onMouseEnter event on each page (which renders as canvasses)... but it is not available currently as part of the plugin.

Short of modifying the plugin or using a patch to modify the plugin, is there a way I can attach an event listener on all canvas elements (or all children) of a specific div?

I know React does not always like event listeners (since it messes with the Virtual DOM or something), so is there any smart way to do it, or should I just bite the bullet and try to modify the package?

Answer 1

var parentElement = document.getElementById('parentElementId');

function handleClick(event) {
  console.log('Clicked!');
  console.log('Target:', event.target);
}
parentElement.addEventListener('click', handleClick);

function handleChildClick(event) {
   if (event.target.classList.contains('childElementClass')) {
      console.log('Child clicked!');
      console.log('Target:', event.target);
   }
}
parentElement.addEventListener('click', handleChildClick);

I hope it will help you