Understanding how event delegation/propagation works in JS

<div class="full-image">
        <img
          src="https://images.unsplash.com/photo-1730484976453-c6657e01df5c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="dock with an umbrella"
        />
      </div>
      <div class="scroller">
        <div class="image-icon">
          <img
            src="https://images.unsplash.com/photo-1730484976453-c6657e01df5c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="dock with an umbrella"
          />
        </div>
      </div>

const scroller = document.querySelector('.scroller');
const mainImage = document.querySelector('.full-image img');

scroller.addEventListener('click', (event) => {
    if (event.target.matches('img')) {
        mainImage.src = event.target.src;
    }
})