DEV Community

A Guide to Handling Browser Events

Sarah Chima on April 16, 2019

Cover Photo by Ambitious Creative Co. - Rick Barrett on Unsplash Most web pages are interactive and users can perform actions on the web page. ...

Read full post

Eugene Karataev • Apr 16 '19

Thanks for the article, Sarah.
One question about the browser events bothers me for some time. You mentioned the third parameter useCapture when adding a listener to a DOM node. When readng fellow developers code sometimes I see boolean values true/false, sometimes objects {useCapture: true}. What's the difference between them? And what was the purpose to implement both options in browsers if there is no difference between them?

Nick Taylor • Apr 16 '19

Sarah mentions it in the article. 😀

"The difference between bubbling and capturing is that in the bubbling phase, events propagate outwards. That is, the handler on the innermost element gets triggered first, then the parent all the way up.

In capturing, the reverse occurs. The handler on the outermost element is triggered first and then the child handler all the way down to the element where the event occurred. "

Eugene Karataev • Apr 16 '19

I mean there are two ways to add event listener in capture phase:

node.addEventListener('click', e => console.log(e.eventPhase), true);
node.addEventListener('click', e => console.log(e.eventPhase), {capture: true});

The result will be the same.
So my question was: is there any difference in these statements or they do exactly the same thing?

Sarah Chima • Apr 16 '19

Hi Eugene.

They do exactly the same thing. true is a shorthand for {capture: true}.

Thanks for reading my article.

Nick Taylor • Apr 16 '19

Ahh, sorry misunderstood what you were asking. 🙃 I believe Sarah just answered you.

John De Costa • Apr 16 '19

Excellent explanation Sarah. Keep up this great work.

Sarah Chima • Apr 16 '19

Thank you John.

Budy • Apr 18 '19 • Edited

Thanks for sharing.. Just want to add, using arrow function as eventListener callback will make the element lose the this context...

var span = document.querySelector('span');
span.addEventListener('click', (event) => {
   console.log(this); // Window Object
}

compared to this

var span = document.querySelector('span');
span.addEventListener('click', function(event) {
   console.log(this); // Element Object
   this.innerHTML = 'Hola';
}

Nando • Apr 21 '19

Budy, sorry but I don't notice any difference in the two snippets ... maybe the latter should be a regular function declaration such as "function(event) {...}" ?
thank you, happy Easter!

Budy • Apr 23 '19

Sorry, I've updated the snippet :)

Wes • Apr 16 '19

Nice summary 👌

Nick Taylor • Apr 16 '19

Great explanation Sarah. Bubbling is so powerful because it allows you to reduce the potential number of events added to a page. Too many events can bog down a site.

Nick Taylor

Feb 11 '18

I did a hello world in web components a couple of years ago, but haven't touched them since. Thanks for the refresher!

I'd just make one suggestion about adding event listeners. This is not web component specific, but for adding event listeners in general. In the case of the rainbow-text component, the number of <span />s increases for every additional letter in the text attribute, so the number of event listeners per instance of the component is n letters * 2 (mouse over + animation end events).

You can end up with a lot of events very quickly just for one instance of the component. What you can do is add an event listener for each event type on the parent <div /> you create in aspittel/rainbow-word-webcomponent and then the power of event bubbling is your friend.

e.g.

class RainbowText extends HTMLElement {
  …

  addEventListeners(div) {
    div.addEventListener("mouseover", e => {
      const { target } = e;

      if (target.tagName === "SPAN") {
        target.classList.add("hovered");
        console.log(`mousing over ${target.tagName}`);
      }
    });

    div.addEventListener("animationend", e => {
      const { target } = e;

      if (target.tagName === "SPAN") {
        target.classList.remove("hovered");
        console.log(`mousing over ${target.tagName}`);
      }
    });
  }

  …

  render() {
    const div = document.createElement("div");
    div.classList.add("header");
    this.addEventListeners(div);
    this.shadowRoot.appendChild(div);
    this.addSpans(div);
    this.addStyle();
  }
}

Mamadou Alpha Diallo • Apr 16 '19

great code

Nando • Apr 21 '19

thank you, Sarah. simple and clear. have nice days

Anna Rankin • Apr 19 '19

This is a great overview, thank you Sarah! Always love to see great vanilla JS resources.