Gia：如何通过事件总线将事件对象传递给处理程序

Question

我正在学习如何使用 Gia（对于小型 Web 项目），但我无法找到如何通过 Gia 的事件总线将事件对象从一个组件传递到另一个组件的事件处理程序。

这里有两个基本组件，通过事件总线进行通信：

class navigation extends Component {
  constructor(element) {
    super(element);
    //
    // Define "Sub-components"
    this.ref = {
      navLinks: [],
    };
  }

  mount() {
    //
    // Listen for clicks on nav.-links
    for (let i = 0; i < this.ref.navLinks.length; i++) {
      const link = this.ref.navLinks[i];
      link.addEventListener("click", this.handleNavLinkClick.bind(this));
    }
  }

  handleNavLinkClick(e) {
    //
    // Emit event
    let clickedLink = e.target;
    if (clickedLink.classList.contains("callHeader")) {
      eventbus.emit("callingSubpageHeader");
    }
  }
}

class subpageHeader extends Component {
  mount() {
    //
    // Listen for call from eventbus
    eventbus.on(
      "callingSubpageHeader",
      this.handleEventBusCall_callHeader.bind(this)
    );
  }
  //
  // Eventbus handler(s)
  handleEventBusCall_callHeader() {
    console.log("The subpage-header was called.");
  }
}

第二个组件中事件的发出和处理程序的后续调用工作正常。但是我想在调用处理程序时将附加信息从第一个组件传递到第二个组件。 The Gia documentation mentions that the emit method of the eventbus can pass an eventObject 给处理程序：

Calls any handlers previously registered with the same event name. Optional event object can be used as a argument, which gets passed into a handlers as an argument.

eventbus.emit('eventName'[, eventObject]);

遗憾的是，没有示例，我不知道传递对象是如何工作的。我尝试将 "something"（在本例中是在第一个组件中单击的 link）添加到发射函数的调用中，但不知道 how/where 我可以 read/use 这也不是如果将某些东西作为 eventObject 以这种方式传递：

class navigation extends Component {
  constructor(element) {
    super(element);
    //
    // Define "Sub-components"
    this.ref = {
      navLinks: [],
    };
  }

  mount() {
    //
    // Listen for clicks on nav.-links
    for (let i = 0; i < this.ref.navLinks.length; i++) {
      const link = this.ref.navLinks[i];
      link.addEventListener("click", this.handleNavLinkClick.bind(this));
    }
  }

  handleNavLinkClick(e) {
    //
    // Emit event
    if (clickedLink.classList.contains("callHeader")) {
      eventbus.emit("callingSubpageHeader", [e.target]);
    }
  }
}

如果有人能解释一下在这种情况下传递 eventObject 的概念和语法，那就太好了。

Answer 1

事件处理程序将事件中的对象作为参数传递，因此您的处理程序可以将该对象作为函数签名中的变量获取，如下所示：

handleEventBusCall_callHeader(target) {
  console.log("The subpage-header was called.");
}

您的事件处理程序中的变量 target 现在等于您随事件传递的对象。

当你调用这个事件时，你不需要把你的参数放在[]中，这只会在传递它之前把它放入一个数组中，这会让你以后很头疼。文档中的括号仅表明 eventbus.emit 的第二个参数是可选的。

Gia：如何通过事件总线将事件对象传递给处理程序

Gia: How to pass event object to handler via eventbus

javascript

event-handling

dom-events