emit and event when clicking outside of the elmenet in javascript

To emit an event when clicking outside of a specific element in JavaScript, you can listen for click events on the document object and check whether the clicked element is a child of the specified element or not. If it is not a child, then emit the event. Here's an example code snippet:

index.tsx
const element = document.getElementById('my-element');

document.addEventListener('click', event => {
  const isClickInside = element.contains(event.target);

  if (!isClickInside) {
    const customEvent = new Event('clickoutside');
    element.dispatchEvent(customEvent);
  }
});
282 chars
11 lines

In this code, we first get a reference to the element that we want to detect clicks outside of. Then, we add a click event listener to the document object. Inside the listener, we check if the clicked element is a child of the specified element using the contains method. If it is not, then we create a new custom event using the Event constructor and dispatch it on the specified element using the dispatchEvent method.

Now, to handle this event elsewhere in your code, you can listen for it like this:

index.tsx
element.addEventListener('clickoutside', () => {
  console.log('Clicked outside of the element');
});
102 chars
4 lines

In this example, we add a new event listener to the specified element for the clickoutside event that we just created. When this event is emitted (when a click happens outside of the element), the callback function will be called, and the message 'Clicked outside of the element' will be logged to the console.