在 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

就我个人而言，我认为没有关于此的规则，但是伟大的 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);

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

Answer 2

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

Does it have to be e or event.

没关系。对于我们所关心的，它可能是 ajdlahksjd。

Is it appended as the last argument or can it also be the first?

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

Can you do this:
 function eventHandler(e, a, b, c, d){}
Is e still referring to the event or is it d?

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

Or to make the above work you need to explicitly use the keyword event?

event 不是关键字。您可以根据需要命名参数。

What are the rules of thumb when it comes to declaring the event argument within a function in JavaScript?

有none。没有神奇的静态检查事件处理程序。它只是一个接受参数的函数，仅此而已。

但是，肯定有一个约定来命名参数e或event，只是因为它是代表事件的变量的合理名称对象。

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

General way to provide the event argument in a function in JavaScript

javascript

events

arguments