$event 对象在 Angular 2 中究竟做了什么？答案

【问题标题】：What exactly $event object do in Angular 2?$event 对象在 Angular 2 中究竟做了什么？
【发布时间】：2016-06-21 12:16:57
【问题描述】：

我有点困惑$event 到底在做什么，这两个例子有什么区别

<button (click)="clicked($event)"></button>

@Component(...)
class MyComponent {
  clicked(event) {
    event.preventDefault();
  }
}

和

<button (click)="clicked()">Click</button>



 @Component(...)
    class MyComponent {
      clicked(event) {
      }
    }

【问题讨论】：

在底层 Angular 使用了一个名为 $event 的参数，并从字面上复制了你的回调代码 clicked($event)，因此 $event 被硬编码为该值。看起来像这样self.parentView.context.clicked($event)。如果您使用自定义名称而不是 $event，例如 event123，Angular 将检查 componentInstance.event123 属性并将其作为参数传递 - 这可能是 null/undefined。这与使用 HTML 内联处理程序 <input type="button" onclick="clickHandler(event)" > 的行为类似，其中只能使用确切的文本 event
@Brian 我们通常不会将event 参数作为属性值的一部分传递，但处理程序确实具有该参数function clickHandler(event){..}（如果需要）。我认为OP应该知道，事件在DOM中是如何工作的，如图here
@overexchange 您必须从元素的属性onclick="clickHandler(event)" 传递'event' 参数，否则事件将不会传递给JS 文件中的处理程序。 plnkr.co/edit/9oOCztMuaq7rkowdHsGT?p=preview 这与 Angular 在这种情况下的行为密切相关

【解决方案1】：

$event 是事件本身。

事件绑定(someevent) 允许绑定到DOM 事件和EventEmitter 事件。语法完全一样。

对于 DOM 事件，$event 是 MouseEvent、KeyboardEvent 或您所侦听的任何事件类型的事件值。

对于EventEmitter 事件，发出的值可用作$event

假设这个例子$event指的是发射的Ferrari汽车实例：

@Output() carChange:EventEmitter<Car> = new EventEmitter<Car>();

someMethod() {
  this.carChange.emit(new Car({name: 'Ferrari'}));
}

如果您不使用 $event 就像在 (click)="clicked()" 中一样，则不会传递事件值。

实际上据我记得在某些浏览器中仍然通过但不是全部（不记得是哪些）

但是，如果您使用 Angulars WebWorker 功能，那么如果您没有明确列出它，您的方法可能不会获得触发或发出的事件。

【讨论】：

我认为$event 是hierarchy 中的事件类型之一（UIEvent/MouseEvent）。对吗？
在浏览器中是MouseEvent 代表(click)，对于输出，它可以是任何类型。
click= f()在带有 JavaScript 的 HTML 中，我们不会在处理程序中传递 event。但是处理程序定义确实有参数。 function f(e){.... }
我也见过这种方法，通过this:<mycomponnent> (selected_course)="changed(this)"</mycomponent>。这是否引用了组件或事件？
@MinhNghĩa “语法”是什么意思？它只是事件绑定表达式范围内可用的标识符。

【解决方案2】：

如果您没有在模板中传递$event，那么您的clicked() 方法中的$event 变量将不可用。

查看此Plunker 进行快速比较

【讨论】：

哈哈，当年也是。查看默认的 Plunker SystemJS config.js 似乎，它总是使用最新的 Angular 2 版本。 bootstrap 搬到哪里去了？自从切换到 Dart 版本后，我有一段时间没有关注 TS 开发。感谢 zoechi 启发我：D