在 Class 中获取调用事件 - 在 JavaScript 中没有参数的函数

Question

我有一个 Class 用于简单的输入处理，如下所示：

class Key
{
    static enter(event, handler)
    {
        if (event.keyCode === 13) {
            $handler();
        }
    }
}

它被称为 <div onkeydown="Key.enter(event, customFunction)"></div>

我希望能够在 Key.enter() 中获取事件，而不必总是将其传递给函数。我知道在正常的函数中 this.event 会起作用，但这不起作用，可能是因为我在 class.

中

任何想法如何仍然获得调用该函数的事件，以便我可以像 Key.enter(customFunction) 一样调用它？

更新：将函数设为静态，它已经在我的代码中，但忘记在问题中写了。

Answer 1

调用事件处理程序时，实际事件将作为全局 event 变量（或作为 window.event，参见 MDN）提供，因此事件对象将是可从事件处理程序访问，无需直接传递。在下面的示例中，单击一个正方形使其获得焦点，然后按任意键。按下的键将被打印到日志中。

请注意 “您应该避免在新代码中使用这个属性，而应该使用传递到事件处理函数中的事件”（请参阅 MDN了解详情）。

// 1. Function
function onKeyDown() {
  console.log("onKeyDown() ->", event.key);
  event.preventDefault();
}

// 2. Method
class A {
  onKeyDown() {
    console.log("new A().onKeyDown() ->", event.key);
    event.preventDefault();
  }
}

// 3. Static method
class B {
  static onKeyDown() {
    console.log("B.onKeyDown() ->", event.key);
    event.preventDefault();
  }
}

.square {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: lightblue;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
}

.square:focus {
  outline: solid 1px blue;
}

<div class="square" tabIndex="0" onkeydown="onKeyDown()">Function</div>
<div class="square" tabIndex="0" onkeydown="new A().onKeyDown()">Method</div>
<div class="square" tabIndex="0" onkeydown="B.onKeyDown()">Static Method</div>

在 Class 中获取调用事件 - 在 JavaScript 中没有参数的函数

Get calling Event inside of Class-Function without Parameter in JavaScript

javascript

class

event-handling

dom-events