javascript - Angular2 中的事件委托(delegate)

Question

我正在用 ng2 开发一个应用程序，但遇到了一些问题。我正在构建一个日历，您可以在其中选择一个日期范围，我需要对日期单元格上的 click 和 mouseenter/mouseleave 事件使用react。所以我有一个这样的代码(简化):

calendar.component.html

<month>
    <day *ngFor="let day of days" (click)="handleClick()" 
         (mouseenter)="handleMouseEnter()" 
         (mouseleave)="handleMouseLeave()" 
         [innerHTML]="day"></day>
</month>

但这让我在浏览器的内存中有数百个单独的事件监听器(每天的单元格有 3 个事件监听器，我一次最多可以显示 12 个月，所以它会超过 1000 个监听器)。

所以我想以“正确的方式”来做，使用称为“事件委托(delegate)”的方法。我的意思是，在父组件 (month) 上附加一个点击事件，当它收到一个点击事件时，只需检查它是否发生在 Day 组件上——只有这样我才会对此点击使用react。类似 jQuery 的东西是 on() method当您将 selector 参数传递给它时。

但我是通过在处理程序代码中本地引用 DOM 元素来做到这一点的:

month.component.ts

private handleClick(event) {
    if (event.target.tagName === 'DAY') {
        // handle day click
    } else {
        // handle other cases
    }
}

我的同事们拒绝了我的想法，因为——正如他们所说的——“在 NG2 中必须有一种更简单、正确的方法来处理这个问题；就像在 jQuery 中一样。此外，它在这里失去了控制——你正在使用react月代码中一天的点击。”

所以，我的问题是，有没有更好的方法？还是我正在尝试解决一个我不应该再费心解决的问题，因为用户的设备每天都获得越来越多的内存/处理能力？

提前致谢!

Answer 1

简介

我今天偶然发现了这个，我真的可以在很多应用程序中看到对这个实现的需求。现在我不能保证这是 100% 最好的技术，但是我已经竭尽全力使这种方法尽可能地受到启发。

我提出的方法有两个阶段。第 1 阶段和第 2 阶段都会添加总共 年 * 月 + 年 * 月 * 天，因此 1 年你将有 12 + 365 事件。

---

阶段范围

第 1 阶段:委派从点击月份到实际点击日期的事件，而不需要当天的事件。
第 2 阶段:将所选日期传播回月份。

在深入研究之前，该应用程序由 3 个组件组成，它们按以下顺序嵌套:app => month => day

---

这是所有需要的 html。 app.component 托管多个月，month.component 托管多个天，而 day.component 什么都不做，只是将它的日期显示为文本。

app.component.html

<app-month *ngFor="let month of months" [data-month]="month"></app-month>

month.component.html

<app-day *ngFor="let day of days" [data-day]="day">{{day}}</app-day>

day.component.html

<ng-content></ng-content>

这是非常标准的东西。

---

第一阶段

让我们看一下我们要从中委托(delegate)事件的 month.component.ts。

// obtain a reference to the month(this) element 
constructor(private element: ElementRef) { }

// when this component is clicked...
@HostListener('click', ['$event'])
public onMonthClick(event) {
  // check to see whether the target element was a child or if it was in-fact this element
  if (event.target != this.element.nativeElement) {
    // if it was a child, then delegate our event to it.
    // this is a little bit of javascript trickery where we are going to dispatch a custom event named 'delegateclick' on the target.
    event.target.dispatchEvent(new CustomEvent('delegateEvent'));
  }
}

在阶段 1 和阶段 2 中，只有 1 个注意事项，那就是；如果您在 day.component.html 中嵌套了子元素，您将需要为此实现冒泡，在 if 语句中实现更好的逻辑，或者在 中进行快速修改。 day.component.css :host *{pointer-events: none;}

---

现在我们需要告诉我们的 day.component 期待我们的 delegateEvent 事件。所以在 day.component.ts 中，您所要做的(以最 Angular 方式)是...

@HostListener('delegateEvent', ['$event'])
 public onEvent() {
   console.log("i've been clicked via a delegate!");
 }

这是有效的，因为 typescript 不关心事件是否是原生的，它只会将一个新的 javascript 事件绑定(bind)到元素，从而允许我们通过 event.target.dispatchEvent 调用它“原生” 正如我们在 month.component.ts 中所做的那样。

第 1 阶段结束，我们现在成功地将每月的事件委托(delegate)给每天。

---

第 2 阶段

那么如果我们说想在 day.component 中的委托(delegate)事件中运行一些逻辑然后将其返回给 month.component 会发生什么 - 这样然后它可以在非常面向对象的方法中继续执行自己的功能吗？幸运的是，我们可以很容易地实现这一点!

在 month.component.ts 中更新为以下内容。唯一不同的是，我们现在要通过事件调用传递一个函数，并且我们定义了回调函数。

@HostListener('click', ['$event'])
  public onMonthClick(event) {  
    if (event.target != this.element.nativeElement) {
      event.target.dispatchEvent(new CustomEvent('delegateEvent', { detail: this.eventDelegateCallback}));
    }
  }

  public eventDelegateCallback(data) {
    console.log(data);
  }

剩下的就是在 day.component.ts 中调用此函数...

public onEvent(event) {
    // run whatever logic you like, 
    //return whatever data you like to month.component
    event.detail(this.day);
}

不幸的是，我们的回调函数在这里的命名有点含糊不清，但是 typescript 会提示该属性不是 CustomEventInit 的已定义对象文字，如果以其他方式命名的话。

---

多事件漏斗

关于这种方法的另一个很酷的事情是，你永远不必定义超过这个数量的事件，因为你可以通过这个委托(delegate)汇集所有事件，然后在 day.component.ts 按 event.type...

过滤

month.component.ts

@HostListener('click', ['$event'])
@HostListener('mouseover', ['$event'])
@HostListener('mouseout', ['$event'])
  public onMonthEvent(event) {  
    if (event.target != this.element.nativeElement) {
      event.target.dispatchEvent(new CustomEvent('delegateEvent', { detail: this.eventDelegateCallback }));
    }
  }

day.component.ts

private eventDelegateCallback: any;

@HostListener('delegateEvent', ['$event'])
  public onEvent(event) {
    this.eventDelegateCallback = event.detail;
    if(event.type == "click"){
       // run click stuff
       this.eventDelegateCallback(this.day)
    }
  }