Tips for triggering an event from a function instead of the window

Question

Tips for triggering an event from a function instead of the window

Everything is functioning as expected, with the event listener successfully capturing the custom event when it is dispatched from the window and listened for as loading, all seems to be working well.

const MyLib = mylib();
  function mylib() {
    const res = {
      init: (data) => {
        let loading = new CustomEvent('loading', {detail: { loading: true }});
        window.dispatchEvent(loading);
      }
    }
  return res;
}

event listener

 window.addEventListener('loading', handleLoading);

I'm looking to update it to use MyLib.addEventListener instead of window.addEventListener.

Additionally,

window.dispatchEvent(loading); should become MyLib.dispatchEvent(loading);

However, when attempting this change, I encounter an error message stating

TypeError: MyLib.addEventListener is not a function

The solution posted below involves using a class, but I am curious if it is possible to achieve this without utilizing a class structure.

javascript typescript

Answer 1

Answer №1

To effectively handle events on an object, the object must inherit from the EventTarget interface.

class MyLibrary extends EventTarget {
    constructor() {
        super();
    }

    initialize(data) {
        let loadingEvent = new CustomEvent('loading', { detail: { loading: true } });
        this.dispatchEvent(loadingEvent);
    }
}

// Assume myLibrary is an instance of MyLibrary

useEffect(() => {
    myLibrary.addEventListener('loading', handleLoading);
    return () => {
        myLibrary.removeEventListener('loading', handleLoading);
    };
}, []);

Answer 2

To effectively handle events on an object, the object must inherit from the EventTarget interface.

class MyLibrary extends EventTarget {
    constructor() {
        super();
    }

    initialize(data) {
        let loadingEvent = new CustomEvent('loading', { detail: { loading: true } });
        this.dispatchEvent(loadingEvent);
    }
}

// Assume myLibrary is an instance of MyLibrary

useEffect(() => {
    myLibrary.addEventListener('loading', handleLoading);
    return () => {
        myLibrary.removeEventListener('loading', handleLoading);
    };
}, []);

Answer 3

Answer №2

Using a Proxy object can help meet the specifications.

This code snippet demonstrates how the original MyLib object is encapsulated within a Proxy. The get trap of the Proxy is triggered when accessing methods like addEventListener or dispatchEvent.

function mylib() {
  const res = {
    init: (data) => {
      let loading = new CustomEvent('loading', {detail: { loading: true }});
      MyLib.dispatchEvent(loading);
    }
  }
  return res;
}

const MyLib = new Proxy(mylib(), {
  get: function(target, prop) {
    if (prop === `addEventListener`) {
      return (...args) => window.addEventListener(...args);
    } 
    if (prop === `dispatchEvent`) {
      return (...args) => window.dispatchEvent(...args);
    }
    return target[prop];
  }
});

MyLib.addEventListener('loading', () => { console.log("Hello world !!!") });
MyLib.init();

Answer 4

Using a Proxy object can help meet the specifications.

This code snippet demonstrates how the original MyLib object is encapsulated within a Proxy. The get trap of the Proxy is triggered when accessing methods like addEventListener or dispatchEvent.

function mylib() {
  const res = {
    init: (data) => {
      let loading = new CustomEvent('loading', {detail: { loading: true }});
      MyLib.dispatchEvent(loading);
    }
  }
  return res;
}

const MyLib = new Proxy(mylib(), {
  get: function(target, prop) {
    if (prop === `addEventListener`) {
      return (...args) => window.addEventListener(...args);
    } 
    if (prop === `dispatchEvent`) {
      return (...args) => window.dispatchEvent(...args);
    }
    return target[prop];
  }
});

MyLib.addEventListener('loading', () => { console.log("Hello world !!!") });
MyLib.init();

Tips for triggering an event from a function instead of the window

Answer №1

Answer №2

Similar questions

While it is possible to filter by friend.brand.id within friends in Angular, unfortunately the || undefined trick cannot be used to reset the filter when it is NULL

Arranging a string array in JavaScript according to an integer array

Declarations of Typescript React for Props for Specific Element

What is the best way for library creators to indicate to VSCode which suggested "import" is the correct one?

Using Rails to render a partial containing a form object

Should the header include individual CSS and JS files, or should all code be contained within a single CSS and JS file?

What are the steps to integrate the vue-tweet-embed node package into vuejs2?

Error: Unable to access the property 'map' as it is undefined | React, Redux

Is it possible to execute "green arrow" unit tests directly with Mocha in IntelliJ IDEA, even when Karma and Mocha are both installed?

Webpack focuses solely on serving HTML files, neglecting to deliver the underlying code

Processing images with PHP from an array using AJAX

Insert HTML content into an iframe with a callback function

React Material-UI - Mobile-friendly Masonry Layout

Incorporate a class into the fixed navigation menu using fullpage.js

Tips on organizing a JSON object for a JavaScript project

Next.js does not recognize Typescript Context

Is there a way to assign the chosen option from a dropdown list to an input field in Vue 3?

If a generic string argument is not specified as a string literal, it will not be narrowed unless it is the first argument

Button Click Not Allowing Webpage Scroll

Adding a property conditionally in jsx: A guide