EventHandler

12 Sep 20253 minutes to read

EventHandler class provides option to add, remove, clear and trigger events to a HTML DOM element

<div id="Eventdiv">  </div>
<script>
  let node: HTMLElement = document.querySelector("#Eventdiv");
  EventHandler.addEventListener(node, "click", function(){
      // click handler function code
  });
  EventHandler.addEventListener(node, "onmouseover", function(){
      // mouseover handler function code
  });
  EventHandler.removeEventListener(node, "click", function(){
      // click handler function code
  });
  eventObj.clearEvents();
</script>

Methods

add

Add an event to the specified DOM element.

Parameter	Type	Description
element	Element | HTMLElement | Document	Target HTML DOM element
eventName	string	A string that specifies the name of the event
listener	Function	Specifies the function to run when the event occurs
bindTo (optional)	Object	A object that binds ‘this’ variable in the event handler
intDebounce (optional)	number	Specifies at what interval given event listener should be triggered.

Returns Function

clearEvents

Clear all the event listeners that has been previously attached to the element.

Parameter	Type	Description
element	Element	Specifies the target html element to clear the events

Returns void

remove

Remove an event listener that has been attached before.

Parameter	Type	Description
element	Element | HTMLElement | Document	Specifies the target html element to remove the event
eventName	string	A string that specifies the name of the event to remove
listener	Function	Specifies the function to remove

Returns void

trigger

Trigger particular event of the element.

Parameter	Type	Description
element	HTMLElement	Specifies the target html element to trigger the events
eventName	string	Specifies the event to trigger for the specified element. Can be a custom event, or any of the standard events.
eventProp (optional)	Object	Additional parameters to pass on to the event properties

Returns void