在keydown上,值的console.log为什么与将值分配给对象不同?

当我在文本框中键入内容并在Chrome浏览器中记录控制台按下事件时,我可以看到它具有很多属性(特别是我正在尝试访问KeyboardEvent.code)。

控制台输出

{
altKey: false
bubbles: true
cancelBubble: false
cancelable: true
charCode: 0
code: "Tab"
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: true
detail: 0
eventPhase: 0
isComposing: false
isTrusted: true
key: "Tab"
keyCode: 9
location: 0
metaKey: false
path: (25) [input#My-monthly-budget.form-control.p-0.border-left-0.spec--money-input.ng-untouched.ng-invalid.is…, div.input-group.is-invalid, div.fc-col-input, div.fc-row, finance-control-money.col-sm-12.my-2.my-md-3.my-lg-0.col-lg-3, div.row.mb-1.pb-2.ng-star-inserted, finance-filters-section.mt-5.mt-lg-3.pt-1, div.finance-filters-container, section#finance-filters.ng-star-inserted, finance-section.ng-star-inserted, section.pl-3.py-3, div.ng-tns-c15-4.ng-trigger.ng-trigger-toggleAccordion, div.py-3, personalise-journey-step-accordion#personalise-funding.ng-tns-c15-4, div.container.mt-5, ng-component.ng-star-inserted, ng-component.ng-star-inserted, div.position-relative.pt-5.ng-trigger.ng-trigger-routerTransition, div.ng-tns-c3-1, ng-component.ng-tns-c3-1.ng-star-inserted, app-root, body#login-page.login-page.system-page.live.auth-page, html, document, Window]
repeat: false
returnValue: false
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: input#My-monthly-budget.form-control.p-0.border-left-0.spec--money-input.ng-untouched.ng-invalid.is-invalid.ng-dirty
target: input#My-monthly-budget.form-control.p-0.border-left-0.spec--money-input.ng-untouched.ng-invalid.is-invalid.ng-dirty
timeStamp: 11386.555000091903
type: "keydown"
view: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
which: 9
}

但是,当我将此值分配给对象时,唯一可以访问的属性是“ isTrusted”

对象值

{ "isTrusted": true }

可以在下面的CodePen中看到一个示例

https://codepen.io/aidanbiggs/pen/KKdWmBQ

的HTML

<my-app></my-app>

打字稿

// import does not work in Codepen
// using const instead
const {Component, HostListener} = ng.core;
const {bootstrap} = ng.platform.browser;

@Component({
    selector: 'my-app',
    template: '<div style="padding:1rem; display:flex; flex-direction: column"><input placeholder="Type here to see"> <div style="margin-top:1rem;">Event has property "code": {{value}}</div><div style="margin:1rem 0">Event:</div><span style="border:1px solid black; padding:1rem">{{event | json}}</span><div style="margin-top:1rem">View console to see difference between object and console.log</div>'
})
class AppComponent {
  public value:boolean ;
  public event: KeyboardEvent;
@HostListener('keydown', ['$event'])
    public onKeyDown(event: KeyboardEvent): boolean {
      this.value = event.hasOwnProperty('code');
      this.event = event;
      console.log(event)
    }}

bootstrap(AppComponent);

为什么事件的console.log()和分配事件之间有区别?

评论