可以将哪些参数传递给html属性onchange、onclick等？

Question

当我开始学习 javascript 时，我认为浏览器会简单地在元素的 onclick 属性中运行 javascript，就好像它在脚本标签内一样。但是我意识到情况并非如此，因为您可以在这些属性中使用某些参数。例如onclick="foo(this, event)" 将触发的事件和触发事件的元素传递给函数 foo。

我想知道在这些标签中还可以使用哪些其他参数？ w3schools 上的文档没有提到任何关于此的内容。我也想知道这些属性是如何实现的；该函数是如何调用的以及在什么范围内调用（我知道 foo 会像 element.foo() 一样被调用，但对于其他 javascript 表达式来说并非如此）。任何地方都有全面的文档吗？目前我最好的猜测是实现看起来像这样：

element.onclickfunction = function(){
    var event = new Event(...)
    eval(element.onclick)
}

编辑： 没有一个回答真正回答了我的问题。我很想知道可以将哪些其他特殊参数传递给事件处理程序中指定的函数，以及如何将参数解释为元素。我选择了最佳答案，因为他提供了一个指向 mdn 的链接，其中描述了 EventHandler 接口。

Answer 1

在 JavaScript 中，您可以在任何 DOM 元素、文档本身、上下文窗口或任何其他支持事件的对象上注册事件侦听器。在一大堆网络标准中定义了一大堆事件。列出这些的一个很好的资源是Mozilla Developer Network。

注册到事件的EventListener只接受一个参数：事件。可以看到它只有一个方法handleEvent，它只接受一个参数。

要将其他内容传递给事件处理程序，您可以利用闭包或bind()。我将借用this answer 来演示bind() 的工作原理：

elem.addEventListener(function(a1, a2, e) {
    // inside the event handler, you have access to both your arguments
    // and the event object that the event handler passes
}.bind(elem, arg1, arg2));

将elem、arg1和arg2绑定到函数上意味着函数的this变为elem，函数的前两个参数变为arg1和arg2。 e 参数仍然是触发函数的事件，就像往常一样。当您想将事件处理程序外部的内容传递到处理程序内部时，像这样的绑定内容非常有用。你可以阅读更多关于bind()here的信息。

关于您关于onclick()的具体问题，原理基本相同，只是您将特定的点击事件处理程序注册到元素。它也只需要一个参数，那就是MouseEvent 对象。但与任何函数一样，您仍然可以将其他参数绑定到它。请参阅here 了解更多信息。