Angular 2中的$event对象到底是什么？

Question

我有点困惑，不太清楚$event在这里是做什么的，以及这两个示例之间的区别。

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

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

和

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



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

- Sarvesh Yadav

---

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。 - Drenai

@Brian 通常我们不会将 event 参数作为属性值的一部分传递，但是处理程序确实有该参数 function clickHandler(event){..}（如果需要的话）。我认为 OP 应该知道 DOM 中事件的工作原理，如此处所示 here。 - overexchange

@overexchange 你必须从元素的属性onclick="clickHandler(event)"传递'event'参数，否则事件将不会传递到JS文件中的处理程序。http://plnkr.co/edit/9oOCztMuaq7rkowdHsGT?p=preview 这与Angular在这种情况下的行为密切相关。 - Drenai

Answer 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'}));
}

如果在 (click)="clicked()" 这样的语法中不使用 $event，那么事件值就不会被传递。

实际上，据我所记，在某些浏览器中 仍然会传递 该事件值，但并非所有浏览器都会传递（不记得是哪些浏览器了）

但是，如果您使用 Angular 的 WebWorker 功能，则如果您没有明确列出它，您的方法可能不会收到触发或发射的事件。

- Günter Zöchbauer

---

我认为$event是事件类型(UIEvent/MouseEvent)之一，在这个层次结构中。这正确吗？ - overexchange

click= f()In HTML with JavaScript, we do no pass event in the handler. But the handler definition does have the parameter. function f(e){.... } - overexchange

这个 $ 有没有语法？ - Minh Nghĩa

@MinhNghĩa，“syntax”是什么意思？它只是事件绑定表达式范围内可用的标识符。 - Günter Zöchbauer

不，它们是针对Angular特定的，但大多数TypeScript（和JS）表达式都可以工作。作用域限制在组件内（您无法使用类型（例如 new Foo() )，强制转换或枚举（可以通过组件中的函数、getter、字段或管道进行解决），也不能使用来自全局作用域的任何其他内容。此外，支持?.（安全导航运算符）。 - Günter Zöchbauer

Answer 2

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

请查看此Plunker进行快速比较

- Maximilian Riegler

---

哈哈，那时候确实是这样的。看一下默认的Plunker SystemJS config.js，似乎它总是使用最新的Angular 2版本。bootstrap去哪了？自从我转向Dart版本后，我已经有一段时间没有关注TS开发了。感谢zoechi给我的启示:D - Maximilian Riegler

Answer 3

它保存了事件的所有值。例如，如果您提供了一个输入，那么输入是什么。

- Sayu Paudel