如何将 key 变量传递给其他地方定义的 eventListener 函数？

Question

通常，当您添加事件监听器时，您会这样做：

input.addEventListener('keyup', function(e){// get e.keyCode here});

但是，如果我在其他地方定义了一个函数并且只想将该函数作为变量传递怎么办？ 它看起来像这样：

input.addEventListener('keyup', func);

如何在此处将e作为参数传递（或任何其他参数）？ 谢谢。

Answer 1

只需为函数声明一个参数。 命名函数的语法与匿名函数表达式的语法相同。

 document.querySelector('input').addEventListener('keyup', func); function func(e /* event object */ ){ console.log(e.keyCode); }

 Type something here: <input>

Answer 2

使用通过e的命名函数。 e是所有事件处理程序默认传递的事件对象。 事件处理程序是触发注册事件时调用的函数。 当事件是事件侦听器的第一个参数时，事件被注册：

.addEventListener('keyup', eventHandler)

或 onevent 属性

.onkeyup = eventHandler;

或者一个内联属性（不要使用这个，这不好）

<input onkeyup='eventHandler(e)'>

在下面的示例中， A是一个匿名函数， B与A相同，但有一个命名函数作为事件处理程序。

 const inputA = document.querySelector('.A'); const inputB = document.querySelector('.B'); // Anonymous event handler inputA.addEventListener('keyup', function(e){ console.log(e.key); }); // Named event handler inputB.addEventListener('keyup', keyHandler); function keyHandler(e) { console.log(e.key); }

 <label>A: <input class='A'></label><br> <label>B: <input class='B'></label>

Answer 3

您无需明确传递它

 function func(e) { console.log(e.target.value) } document.getElementById('input').addEventListener('keyup', func)

 <input id='input'>