Till now, we have only looked into button-click events inside our Web Components. This section deals with event handlers from a different perspective.

Let's say we have a Web Component <custom-clicker> that has a button and a number that shows the number of times that button has been clicked. Let's take a look at the definition of this Web Component:

constructor() {

  // We are not even going to touch this.
  super();

  // Initially, the list is empty
  this._num = 0;

  // lets create our shadow root
  this.shadowObj = this.attachShadow({mode: 'open'});
  this.render();
}

We are setting the value of _num to 0. The rest is the same as usual:

render() {
  this.shadowObj.innerHTML = this.getTemplate();
}

getTemplate() {
  return `
    <div class="custom-clicker__container">
      <div class="custom-clicker_num">${this.getTimesClicked()}</div>
      <button class="js-button custom-clicker__button">Click Me</button>
    </div>
    ${this.getStyle()}
  `;
}

The render() and getTemplate() methods are pretty much the same as well. We are simply showing text that is obtained via the getTimesClicked() method and a button that says Click Me: 

getTimesClicked() {
  return `${this._num} times clicked.`;
}

Here, we are simply getting the value of _num and adding informational text. The getStyle() method looks something like this:

getStyle() {
  return `
    <style>
      :host {
        display: block;
      }
      .custom-clicker__button {
        height: 50px;
        width: 200px;
        border-radius: 5px;
        display: inline-block;
        border: 1px solid #cac6c6;
      }
    </style>
  `;
}

We also want to increase the value of _num when the user clicks on the button:

connectedCallback() {

  // what should happen when the button is clicked
  this.shadowObj.querySelector('.js-button')
    .addEventListener("click", (e) => {
      this.handleClick(e);
    });
}

handleClick() {
  this._num++;
  this.shadowObj.querySelector('.custom-clicker_num').innerHTML 
        = this.getTimesClicked();
}

We are simply calling the handleClick() method when the user clicks on the button. Then we are simply adding 1 to this _num variable and updating the .custom-clicker__num div.

Now, we want to let our user know the value when this button is clicked. We can do so with the help of a custom event. We can do so with the help of dispatchEvent():

handleClick() {
  this._num++;
  this.shadowObj.querySelector('.custom-clicker__num').innerHTML 
        = this.getTimesClicked();

  this.dispatchEvent(new CustomEvent('change', {
    detail: {
      num: this._num,
    },
    bubbles: true,
  }));
}

This notifies the listener to a change in the num variable and can be listened by the following code:

<custom-clicker onchange="handleChange(event.detail)"></custom-clicker>

<script type="text/javascript">
  function handleChange(e) {
    console.log(e);
  }
</script>

Alternatively, we can use the following code:

<custom-clicker></custom-clicker>

<script type="text/javascript">
  document.querySelector('custom-clicker').addEventListener('change', (e) => {
    console.log(e.detail);
  });
</script>

We can do anything we want with the e.detail.num variable.

This way, we can add any number of custom events to notify the user of any changes to the Web Component. The information that needs to be passed on can be put in the detail object.