javascript - 可以向 html 属性 onchange、onclick 等传递哪些参数？

Question

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

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

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

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

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

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