如何在JavaScript中检查对象是否是KeyboardEvent？

Question

我想要一个接受事件作为参数的函数,并检查是否传递了有效的事件对象.

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

typeof e回来object.但是调试控制台清楚地显示了KeyboardEvent,所以它必须以某种方式可读.

Answer 1

香草JS

和instanceof操作员一样简单:

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

从解释相关MDN:

所述instanceof操作者测试是否一个对象在其原型链构造的原型属性.

请注意,在处理多个(i)帧/窗口时,此运算符可能会很混乱,因为它们具有不同的上下文和不同的内置.但是在同一窗口/框架中,这不是问题.

示例:

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使用自己的实现包装本机事件:

jQuery的事件系统根据W3C标准规范化事件对象.保证事件对象被传递给事件处理程序(不需要检查window.event).它规范化目标,relatedTarget,metaKey和pageX/Y属性,并提供stopPropagation()和preventDefault()方法.

资源

但请注意,仍然可以通过访问本机事件event.originalEvent.你仍然可以测试event.type(event.type==="keyup" || event.type==="keydown" || event.type === "keypress").

示例:

$("#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">