Events - Javascript

• DOM Events
• Custom Events

DOM Events

• click => When element is clicked by LMB
• keypress
• submit
• focus => When focus on an element
• DOMContentLoaded => HTML DOM loaded
• contextmenu => RMB Click
• transitionend
• dblclick => LMB Double click
• mousedown => Mouse button pressed
• mouseup => Mouse button released
• mouseover => Cursor moved in an element
• mouseout => Cursor moved out of an element
• mousemove
• touchstart
  • Works only in mobile view of the device
• touchmove
• touchend

Custom Events

• Creating a Event

    const myEvent = new Event("myCustomEvent");
    const myEvent = new Event("myCustomEvent", { bubbles: true, cancelable: true }); // Add properties
    const myEvent = new CustomEvent("myCustomEvent", { detail: { namaste: "Dunia" } }); // To pass custom data with event
  
    document.addEventListner("myCustomEvent", e => {
      // statement
    })
  
    document.dispatchEvent(myEvent);