Custom Events example on button click in JavaScript | What is Event Listener in JavaScript | Customevent and Dispatchevent LWC Component with Example in Salesforce


Hey guys, today in this post we are going to learn about Customevent and Dispatchevent LWC Component with Example in Salesforce.


Final Output →


Other related post that would you like to learn in Salesforce


Create HTML Page →

Step 1:- Create HTML Page : index.html

index.html [HTML PAGE]

  2.   <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.      <title>welcome TO tech w3web</title>
  7.     </head>
  8.     <body>
  9.       <h2 id="welcome">Welcome TO Tech W3Web</h2>
  11.        <!-- <div onclick="alert('Salesforce LWC')">Salesforce LWC
  13.           <div onclick="alert('Salesforce Visualforce')">Salesforce Visualforce
  14.                <div onclick="alert('Aura Framework Salesforce')">Aura Framework Salesforce
  15.                   <div onclick="alert('Integration Salesforce')">Integration Salesforce</div>
  16.                </div>
  17.           </div>
  19.        </div> -->
  22.        <button onclick="eventAction()">custom event action</button>
  24.       <script TYPE="text/javascript" src="function.js"></script>
  25.     </body>
  26. </html>


Create JavaScript.js →

Step 2:- Create JavaScript Page : function.js

function.js [JavaScript Page]

  2.   document.addEventListener('tech', FUNCTION(DATA){
  3.   console.log('tech w3web App' , DATA.detail);
  4. })
  6. FUNCTION eventAction(){
  7.   let myEvent = NEW CustomEvent('tech', {
  8.         detail:{name:'Vijay Tech W3Web'}
  9.     });
  10.     document.dispatchEvent(myEvent);
  11. }



Further post that would you like to learn in Salesforce

FAQ (Frequently Asked Questions)

What is event and event listener in JavaScript?

The event parameter is any valid JavaScript event, such as a click, change, mouseover, key down, and load. The listener parameter is the event callback or JavaScript function created to respond to specific events.

What is the difference between event class and event listener?

An EventListener interface defines the methods that must be implemented by an event handler for a particular kind of an event whereas an Event Adapter class provides a default implementation of an EventListener interface.

When to use addEventListener?

Related Topics | You May Also Like


Our Free Courses →

👉 Get Free Course →

📌 Salesforce Administrators

📌 Salesforce Lightning Flow Builder

📌 Salesforce Record Trigger Flow Builder

👉 Get Free Course →

📌 Aura Lightning Framework

📌 Lightning Web Component (LWC)

📌 Rest APIs Integration

Hi, This is Vijay Kumar behind the admin and founder of I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on