Events in LWC

Events is one of the most interesting and fun to work with concepts in JavaScript.

Let me try to explain Events in layman's terms. The HTML document will be having a whole bunch of tags within it and whenever we want to associate some dynamism to any of the elements we will be using events.

Let me take a simple button

	<button class="slds-btn">Click me!!!</button>

A simple HTML button

If I were to provide some dynamic behavior to the button am gonna add an Event Listener to it. A typical event listener is going to look like this.

const btn = document.querySelector('button');

btn.onclick = function() {
	console.log('HEY Salesforce Casts!!!');
}

Adding an event listener to the button

Simple right ...

Now I can just remove the console.log() statement in the Event Listener and I can put some code to even make an Ajax callout.

In this post, we will be looking at everything that we need to understand about events.

• what are Events in JavaScript
  • Event Bubbling
  • Event Capturing
• How to implement events in LWC
  • Dispatching an event
  • Different variants of events in LWC

    • bubbles: false && composed: false

    • bubbles: true && composed: false

      • event bubbling in the present component and containing component
      • event bubbling only in containing component

    • bubbles: true && composed: true

    • bubbles: false && composed: true

  • Passing data with Events
    • Sending data in events
    • Sending custom defined data types via events
  • Programatically handle events
  • Event retargeting in LWC
  • PubSub, a Library to handle events
  • Lightning Messaging Service