Apply SVG mask on hover

Question

I am trying to apply a svg mask when the cursor enters a svg circle. The masking is working correctly but the events are not fired.

How can I properly set event listeners to svg elements so that when the circle contained in <svg id="container"> is hovered, mask is applied to <rect id="masked">?

const svg = document.getElementById('container')

svg.addEventListener('onmouseover', (e) => {
  console.log('hover')

  const masked = document.getElementById('masked')
  masked.setAttribute('fill', 'grey')
  masked.setAttribute('fill-opacity', '70%')
  masked.setAttribute('mask', 'url(#myMask)')
})

svg.addEventListener('onmouseleave', (e) => {
  console.log('leave')

  const masked = document.getElementById('masked')
  masked.setAttribute('fill', 'none')
  masked.setAttribute('fill-opacity', '100%')
  masked.removeAttribute('mask')
})

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
}

svg,
circle {
  pointer-events: all;
}

<svg id="mySVG" width="600" height="250">
  <mask id="myMask" x="0" y="0" width="600" height="250">
    <rect width="400" height="250" fill="white" />
    <circle cx="25" cy="25" r="25" fill="black" />
  </mask>
  <rect id="masked" x="0" y="0" width="600" height="250" fill="grey"></rect>
  <!-- The following svg element is supposed to trigger events -->
  <svg id="container">
    <!-- This circle overlaps the circle in <mask> -->
    <circle cx="25" cy="25" r="25" fill="none" stroke="black" />
  </svg>
</svg>

Answer 1

The events are called mouseover and mouseleave, not onmouseover and onmouseleave.

const svg = document.getElementById('container')

svg.addEventListener('mouseover', (e) => {
  console.log('hover')

  const masked = document.getElementById('masked')
  masked.setAttribute('fill', 'grey')
  masked.setAttribute('fill-opacity', '70%')
  masked.setAttribute('mask', 'url(#myMask)')
})

svg.addEventListener('mouseleave', (e) => {
  console.log('leave')

  const masked = document.getElementById('masked')
  masked.setAttribute('fill', 'none')
  masked.setAttribute('fill-opacity', '100%')
  masked.removeAttribute('mask')
})

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
}

svg,
circle {
  pointer-events: all;
}

<svg id="mySVG" width="600" height="250">
  <mask id="myMask" x="0" y="0" width="600" height="250">
    <rect width="400" height="250" fill="white" />
    <circle cx="25" cy="25" r="25" fill="black" />
  </mask>
  <rect id="masked" x="0" y="0" width="600" height="250" fill="grey"></rect>
  <!-- The following svg element is supposed to trigger events -->
  <svg id="container">
    <!-- This circle overlaps the circle in <mask> -->
    <circle cx="25" cy="25" r="25" fill="none" stroke="black" />
  </svg>
</svg>