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.
as simple as that with the instanceof operator:
if (e instanceof KeyboardEvent){
// it is a keyboard event!
}
Explainations from MDN :
The
instanceofoperator 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 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.
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">
console.log(e instanceof InputEvent) in my input event handler, it returns false. Any ideas why?
Object (which is acceptable), but not KeyboardEvent (which is confusing). Any idea why?
jqEvent.originalEvent though.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"/>
input be generated by keyboard?KeyboardEvent inherits from InputEvent Event<---InputEvent<---KeyboardEvent. so KeyboardEvents are InputEvents.
InputEvent, the Event includes ShortCuts as well. CTRL+V, CTRL+X, ...try this if(e.type == 'keypress')
function doSomething(e){
if(e.type == 'keypress'){
// Proceed
} else {
console.log('Error: e is not a KeyboardEvent');
}
}
(e.type == 'keypress' || e.type == 'keydown' || e.type == 'keyup'), but that is messy. I'm trying to find a way to use KeyboardEvent key word.