Event Capturing Vs Event Bubbling

Posted on | In

Preface

When I am trying to delegate the error event of img, I find that those events won’t bubble up to window. So,does that mean I have to bind so many events as many as images I have?

Main

After a while, I think of something about event capturing which maybe can solve this question. So, I tried code below:

<img id="img" src="error.png" alt="error.png">
window.addEventListener('error', windowErrorCb, { capture: true }, true)
function windowErrorCb(event) {
  let target = event.target
  let isImg = target.tagName.toLowerCase() === 'img'
  if (isImg) {
    imgErrorCb()
    return
  }
  function imgErrorCb() {
    let isImgErrorHandled = target.hasAttribute('data-src-error')
    if (!isImgErrorHandled) {
      target.setAttribute('data-src-error', 'handled')
      target.src = 'backup.png'
    }
  }
}

Code above works normally. If we change the capture and the last argument to false, it doesn’t work.

In this case, we can find that event capturing seems have more applicable situations than event bubbling. Also it seems faster because I catch and handle the event earlier than event bubbling.
So, I got these questions:

  • Why would we use event bubbling not event capturing as default except for compatibility?

  • Does event capturing really faster than event bubbling as I thought?

  • Does event capturing really have more applicable situations?

The answers can be listed below:

  • Don’t know yet.

  • Yes, you can see the demo here

  • Yes.

Ending

After words above, I think we should use event capturing as default.

Reference

Event Capturing vs Event Bubbling

delegating-capture-vs-bubble