D3.js - why mouseover and mouse out fired for each child elements?

Question

I use d3.js to generate a svg circle with a text logo in mid of the circle. Here is the svg result.

Answer 1

An alternate solution is to use mouseenter and mouseleave instead of mouseover and mouseout.

mouseenter is similar to mouseover except that it is not triggered when the pointer (mouse) is moved from one of listener's (circle in this case) descendants' physical space (text in this case) to its own physical space.

Same reasoning for 'mouseleave'

Source: https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter and https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave