最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to dispatch event from a function instead of window - Stack Overflow

programmeradmin0浏览0评论

The below works fine and my event listener gets the custom event because it's dispatched the event from the window and my event listener is listening for loading on the window, all good.

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);

How can I change it to MyLib.addEventListener instead of window.addEventListener?

and..

window.dispatchEvent(loading); to MyLib.dispatchEvent(loading);

The error I get is TypeError: MyLib.addEventListener is not a function

The answer below works in a class, but id like to know if this is possible without using a class.

The below works fine and my event listener gets the custom event because it's dispatched the event from the window and my event listener is listening for loading on the window, all good.

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);

How can I change it to MyLib.addEventListener instead of window.addEventListener?

and..

window.dispatchEvent(loading); to MyLib.dispatchEvent(loading);

The error I get is TypeError: MyLib.addEventListener is not a function

The answer below works in a class, but id like to know if this is possible without using a class.

Share Improve this question edited Dec 20, 2021 at 10:17 Bill asked Dec 17, 2021 at 12:09 BillBill 5,15018 gold badges93 silver badges153 bronze badges 4
  • 1 dispatchEvent can be called on any type of EventTarget including DOM elements other than the window. What does MyLib do? Because the window object practically means the whole browser window so it is difficult to think of another listener which has a loading event. – Máté Wiszt Commented Dec 17, 2021 at 12:16
  • when you call MyLib.init() I want it to dispatch the loading event, it will then call and API get some data and the dispatch another customer event where loading detail will be false – Bill Commented Dec 17, 2021 at 12:18
  • You don't have addEventListener function on MyLib so it is right that it throws an error. I understand that you want to use custom functions for dispatching custom events but I don't see why you cannot use the window messaging system to dispatch and listen to messages. – Máté Wiszt Commented Dec 17, 2021 at 12:47
  • There are relevant answers here: stackoverflow./a/53917410/362536 – Brad Commented Dec 24, 2021 at 6:53
Add a ment  | 

2 Answers 2

Reset to default 4

In order to dispatch and listen to events on an object, the object will need to inherit from the EventTarget interface.

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

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

// somewhere myLib is an instantiation of MyLib

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

Proxy can be used to achieve the requirements.

Here's a snippet that wraps the original MyLib object in a Proxy, whose get trap is activated when accessing 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();
发布评论

评论列表(0)

  1. 暂无评论