在 JavaScript 中不带参数的类函数中调用事件

Question

我有一个这样的简单输入处理类：

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

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

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

任何想法如何仍然获取调用该函数的事件以便我可以像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>