时间戳

首页 > 解决方案 > 为什么console.log($event) 在单击和keyup（角度6）事件后触发仅显示“受信任”属性？

javascript - 为什么console.log($event) 在单击和keyup（角度6）事件后触发仅显示“受信任”属性？

问题描述

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

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

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 知道，这个事件对象的属性比单独的“受信任”要多得多，如以下页面所示：

鼠标事件 MDN

键盘事件 MDN

所以我的问题是：

  1. 为什么控制台不显示整个对象？

  2. 我怎样才能看到所有的对象？当我使用“更改”事件或类似事件时，当我需要跟踪以前的值等时，这将非常有用。

标签： javascriptangularclickdom-eventskeyup

解决方案

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

推荐阅读