HostListener 的第二个参数是什么，为什么它经常被给出为 ['$event']？答案

【问题标题】：What's the second argument to HostListener for and why is it often given as ['$event']?HostListener 的第二个参数是什么，为什么它经常被给出为 ['$event']？
【发布时间】：2018-04-19 18:28:37
【问题描述】：

Angular 的 HostListener 装饰器有两个参数。第一个指定要侦听的事件的名称。第二个是一个可选的字符串数组，名称为args。当然，文档中目前没有解释它的含义（目前文档用了整个 四个词 来记录 HostListener 装饰器，其中前两个声明它是，呃，“HostListener 装饰器”）。

我只见过HostListener以两种方式调用：

完全省略 args 参数（例如 https://angular.io/guide/styleguide#style-06-01）
将args 参数指定为['$event']，例如在https://angular-2-training-book.rangle.io/handout/advanced-angular/directives/listening_to_an_element_host.html

这个神秘的args 参数有什么作用，为什么有时会指定为['$event']？

【问题讨论】：

coryrylan.com/blog/…

标签： javascript angular

【解决方案1】：

$event 是实际事件值的保留名称，可以在(click)="clickHandler($event)" 事件绑定中使用。

@HostListener('eventName', args) 支持值数组，如

['$event.target.value', '$event.name']

指定哪些值将作为参数传递给事件处理程序。

看起来总是传递$event（假设['$event']为默认值）将是一种更合理的方法，
但是如果使用 WebWorker，这样 UI 线程和 WebWorker 线程之间传递的数据量可以通过只传递事件处理程序实际需要的事件部分来减少（或者如果参数是，则根本没有值）省略）。

另见https://angular.io/api/core/HostListener#args

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

【解决方案2】：

这就是事件:)

普通的Javascript

<div></div>

 div.addEventListener('click', function($event) {
    console.log($event);
  })

所有 javascript 原生事件，例如 keyup 或 click，它们都是异步事件，当它们发生时，您可以监听它们（在 Javascript 中添加监听器，或者在 Angular 中添加 HostListener 或事件绑定），然后在您的当事件发生时要调用的函数，您可以捕获该事件，它基本上是一个 Javascript 对象，它保存有关事件源的信息以及与事件相关的所有其他内容。

同样的事情可以在 Angular 中完成：

 @HostListener('click', ['$event']) myFunction(theEvent) {
    console.log("$event is ", theEvent); // 
  }

$event 是一个可选参数，如果您不感兴趣，不必将其添加到您的参数中。

正如我所说，$event 包含有关实际事件的所有信息，例如它的名称、它的来源、如果它是一个 keyup 事件、按下的键和所有其他的东西，这意味着你可以获得从Event中提取的所有内容：

@HostListener('click', ['$event.target.id']) myFunction(buttonId) {
    console.log("buttonId ",buttonId); // 
  }

或者你可以

 @HostListener('click', ['$event']) myFunction(event) {
    console.log("buttonId ",event.target.id); // 
  }

Angular 中的另一种语法是：

 <button (click)="myFunction($event)">

或者在普通的javascript中你可以说：

 document.querySelector('button').addEventListener('click',($event)=>{
    console.log('the event is',$event);
})

如果你不喜欢使用@HostListener 装饰器，HostListener 也可以写在@Component 装饰器中（虽然你为什么不呢？）

@Component({
   selector:"my-component",
   host:{
    '(click)':'myFunction($event)'
   }
})

【讨论】：