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

underscore.js does not allow data to be manipulated outside of the _.each

AngularJS: Recommendations for structuring code to dynamically update the DOM in response to AJAX requests

Is there a way to conditionally redirect to a specific page using NextAuth?

Restore the button to its original color when the dropdown menu is devoid of options

Retrieving Values from Array with AngularJS Keys - A How-To Guide

What steps can I take to ensure TypeScript compiler approves of variance in calling generic handlers, such as those used in expressJS middleware?

Is there a way to detect and intercept M-SEARCH requests in Express?

A guide on verifying the static characteristics of a class with an interface

Having trouble getting your Ajax script to function correctly when submitting a form?

Executing a function after a subscriber has finished in Angular 8+

Changing Image Size in Real Time

Executing child processes in the Mean Stack environment involves utilizing the `child_process`

The getElementByID function will return null in this instance, as it has not been loaded

Toggle the visibility of a div based on the id found in JSON data

What is the best way to validate if fields are blank before sending a message using the button?

Random Angular template string that does not contain a templateRef

What is the best way to extract data from multiple FormControl instances using RxJS in Angular?

What are some ways I can customize the appearance of this Google Maps infoWindow?

Execute the function within setInterval only one time

ExtJS variable not populating with servlet data