Is it possible to prevent having multiple selectors when setting an event listener on a button with an image inside?

I have an image inside a button, and I want to listen to clicks on the button.
Since the listener is on the button, then when the click is done on the img, it won’t work:

document.addEventListener("click", (event) => {
  if (event.target.matches(".my-button")) {
    console.log('My button clicked')
  }
});

button {
  background: none;
  color: inherit;
  border: none;
  padding: 1em;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  background-color: #4681f4;
  line-height: 0;
}

<button class="my-button">
  <img src="https://cdn-icons-png.flaticon.com/128/483/483054.png" width="40" height="40"/>
</button>

So I have to add a second selector for the inner img as well:

document.addEventListener("click", (event) => {
  if (event.target.matches(".my-button, .my-button img")) {
    console.log('My button clicked')
  }
});

button {
  background: none;
  color: inherit;
  border: none;
  padding: 1em;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  background-color: #4681f4;
  line-height: 0;
}

<button class="my-button">
  <img src="https://cdn-icons-png.flaticon.com/128/483/483054.png" width="40" height="40"/>
</button>

But that feels redundant and as if I am doing something wrong.
Is there a way to avoid this? I was thinking at first to just use the img without a button element, but that feels like not according to the spec.