为什么 console.log($event) 在单击和键入后触发（在 angular 6 中）事件仅显示 "is trusted" 属性？

Question

我正在使用 Angular 6，我尝试触发点击和按键事件。我想查看事件的所有组件，因此我可以选择要使用的对象的值或方法。

我构建了一个非常简单的测试模板，如下所示：

import { Component } from '@angular/core';

@Component({
  selector: 'app-try-ing',
  templateUrl: `

  <button type="" (click)="clickMethod($event)">click here</button>

  <input type="text" (keyup)="inputChange($event)">
  `,
  styleUrls: ['./try-ing.component.css']
})
export class TryIngComponent{
  clickMethod(event){
    console.log(`click event: ${event}`);
    console.log(`click event: ${JSON.stringify(event) }`);
  }

  inputChange(event){
    console.log(`input event: ${event}`);
    console.log(`input event: ${JSON.stringify(event) }`);
  }

  constructor() { }
  ngOnInit()  {}
}

在我点击并填写输入后，控制台（在chrome）显示：

click event: [object MouseEvent]
click event: {"isTrusted":true}
input event: [object KeyboardEvent]
input event: {"isTrusted":true}

我从 MDN 得知这个事件对象比单独 "is trusted" 有更多的属性，正如在这个页面中看到的那样：

mouse event MDN

keyboard event MDN

所以我的问题是：

为什么控制台不显示整个对象？
如何才能看到所有对象？当我使用 'change' 事件或类似事件时，当我需要跟踪以前的值等时，这将非常有帮助。

Answer 1

你应该试试 console.log(event);

为什么 console.log($event) 在单击和键入后触发（在 angular 6 中）事件仅显示 "is trusted" 属性？

why console.log($event) firing after click and keyup (in angular 6) events show only "is trusted" property?

javascript

angular

click

dom-events

keyup