时间戳

首页 > 解决方案 > Gia：如何通过事件总线将事件对象传递给处理程序

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

问题描述

我正在学习如何使用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.");
  }
}

事件的发射和第二个组件内处理程序的后续调用工作得很好。但是我想在调用处理程序时将附加信息从第一个组件传递到第二个组件。Gia 文档提到 eventbus 的 emit 方法可以将 eventObject 传递给处理程序：

调用以前使用相同事件名称注册的任何处理程序。可选的事件对象可以用作参数，它作为参数传递给处理程序。

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

不幸的是，没有例子，我不知道传递对象是如何工作的。我尝试将“某物”（在这种情况下是在第一个组件中单击的链接）添加到发出函数的调用中，但不知道我如何/在哪里可以读取/使用它，也不知道是否将某些东西作为 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 的概念和语法，那就太好了。

标签： javascriptevent-handlingdom-events

解决方案

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

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

事件处理程序内部的变量target现在等于您通过事件传递的对象。

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

推荐阅读