On keydown why does a console.log of the value differ to assigning the value to an object?

Question

When I type into a text box and console log the keydown event in Chrome, I can see that is has lots of properties (notably i'm trying to access KeyboardEvent.code).

Console output

{
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
}

But when I assign this value to an object, the only property I can access is "isTrusted"

Object value

{ "isTrusted": true }

An example of this can be seen in the CodePen below

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

HTML

<my-app></my-app>

TypeScript

// 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);

Why is there a difference between the console.log() of the event and assigning the event?

Not all things have *own properties* so you'll have to clone the event manually: [cloning javascript event object](https://stackoverflow.com/a/12593036) and [How to clone or re-dispatch DOM events?](https://stackoverflow.com/q/11974262) — wOxxOm, Apr 24 '20 at 14:18

Aleksey L. · Accepted Answer · 2020-04-24T15:11:39.163

3

Why is there a difference between the console.log() of the event and assigning the event?

There's no difference, you see different output because json pipe ({{event | json}}) executes JSON.stringify to convert a value into its JSON-format representation. Source

You can find more info on how JSON.stringify works here

So if you'll update the log to console.log(JSON.stringify(event)) - you'll get exactly the same output.

edited Apr 24 '20 at 15:11

answered Apr 24 '20 at 14:40

Aleksey L.

35,047
10
74
84

1

Additionally, I think they may be interested in getting the code of the key pressed from the event. – Dane Brouwer Apr 24 '20 at 14:43
Thanks for the info, it does do the same thing. What would be the best way of being able to see if my keyboardevent has the property of "code" then if I cannot access it from the object? – aidanbiggs Apr 24 '20 at 14:55
I'm not sure I understand the question. Just use `event.code` – Aleksey L. Apr 24 '20 at 15:02
@AlekseyL.I need to check if the property is there before reading it as IE11 doesnt dispatch KeyboardEvent.code. So I want to check if the object has that property , id it does then i use ```this.value = event.code``` but if it doesnt then i use ```this.value = event.key``` – aidanbiggs Apr 24 '20 at 15:08
1

@aidanbiggs `this.value = event.code || event.key` or `this.value = event.code ?? event.key` – Aleksey L. Apr 24 '20 at 15:09

On keydown why does a console.log of the value differ to assigning the value to an object?

1 Answers1