Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to check if an object is a KeyboardEvent in JavaScript?

Tags:

javascript

I want to have a function that accepts event as a parameter and checks if valid event object is passed.

function doSomething(e){
  if(e is a keyboard event){
   // Proceed
  } else {
    console.log('Error: e is not a KeyboardEvent');
  }
}

typeof e just returns object. But debug console clearly shows KeyboardEvent, so it must be readable somehow.

like image 211
Slava Avatar asked Mar 17 '17 15:03

Slava


3 Answers

Vanilla JS

as simple as that with the instanceof operator:

if (e instanceof KeyboardEvent){
  // it is a keyboard event!
}

Explainations from MDN :

The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.

Note that this operator can be messy when dealing with multiple (i)frame/windows because they have different context and different builtins. but in the same window/frame, it's not a problem.

Example :

document.querySelector("#foo").addEventListener("keydown", (event)=>{
  console.log("event instanceof KeyboardEvent : ",event instanceof KeyboardEvent);
});
<label for="foo">edit input to check event type</label>
<input type="text" id="foo">

jQuery

jQuery wraps native events with its own implementation :

jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler (no checks for window.event required). It normalizes the target, relatedTarget, which, metaKey and pageX/Y properties and provides both stopPropagation() and preventDefault() methods.

source

But Note that the native event is still accessible via event.originalEvent. And you can still test event.type (event.type==="keyup" || event.type==="keydown" || event.type === "keypress").

Example :

$("#foo").on("keyup", (jqEvent) => {
  console.log("jqEvent instanceof KeyboardEvent : ", jqEvent instanceof KeyboardEvent); //false
  console.log("jqEvent.originalEvent instanceof KeyboardEvent : ", jqEvent.originalEvent instanceof KeyboardEvent); //true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="foo">edit input to check event type</label>
<input type="text" id="foo">
like image 148
n00dl3 Avatar answered Oct 20 '22 01:10

n00dl3


try this if(e.type == 'keypress')

function doSomething(e){
  if(e.type == 'keypress'){
   // Proceed
  } else {
    console.log('Error: e is not a KeyboardEvent');
  }
}
like image 45
stackoverfloweth Avatar answered Oct 20 '22 00:10

stackoverfloweth


This would work for your case.

Be careful with input-event it is not an instance of KeyboardEvent.

function testEventType(e){
	console.log(e.type, e instanceof KeyboardEvent);
}

document.querySelector("#test").addEventListener('keypress', testEventType);
document.querySelector("#test").addEventListener('input', testEventType);
<input id="test"/>
like image 34
DomeTune Avatar answered Oct 20 '22 01:10

DomeTune