在 JavaScript 中的函数中提供事件参数的一般方法

Question

我多年来以大致相同的方式声明事件参数：

 element.onclick = function(e){};
 element.onclick = function(event){};

 element.addEventListener("click", function(e){}, false);
 element.addEventListener("click", eventHandler, false); //preferred version

 function eventHandler(e){} 

 etc.

• 必须是e 还是event。
• 它是作为最后一个参数附加还是也可以是第一个？

你能做到吗：

 function eventHandler(e, a, b, c, d){}

e 仍然是指事件还是 d？

或者要使上述工作您需要明确使用关键字event？

所以一般的问题是：在 JavaScript 中声明事件参数时有哪些经验法则？

Answer 1

在下文中，我假设您指的是 DOM 事件处理程序。

必须是e 还是event。

没关系。我们关心的可能是ajdlahksjd。

它是作为最后一个参数附加还是也可以是第一个？

事件对象将始终作为第一个参数传递给处理程序。

你能做到吗：

 function eventHandler(e, a, b, c, d){}

e 仍然指的是事件还是 d？

这取决于您如何绑定事件处理程序。如果你只是分配它，它将是e。如果您已经将其他值绑定到参数，例如通过.bind，它将是第一个未绑定的参数。但是，这与事件处理程序没有任何关系。事件处理程序本身也会获取事件对象作为第一个参数。

或者要使上述工作您需要明确使用关键字event？

event 不是关键字。您可以随意命名参数。

在 JavaScript 函数中声明事件参数时有哪些经验法则？

没有。您的事件处理程序没有神奇的静态检查。它只是一个接受参数的函数，就是这样。

但是，约定将参数命名为 e 或 event，仅仅是因为它是表示事件对象的变量的合理名称。

Answer 2

就我个人而言，我认为这没有任何规定，但伟大的 Nicholas Zakas 在他的书 Maintainable JavaScript 中告诉我们，如果你想要一个易于测试和维护的功能，你永远不会必须将事件声明如下：

function myFunction(event) {}

相反，您必须声明函数所需的参数：

function myFunction(clientX, clientY) {}

并且当你调用函数时，你必须从对象事件中传递参数：

// This won't work on IE8 and older versions.
element.addEventListener('click', function(event) {
    myFunction(event.clientX, event.clientY);
}, false);

当您或团队中的其他人必须测试此功能时，他/她不需要模拟任何事件。