时间戳

首页 > 解决方案 > 如何将元素本身和同一函数中的事件作为参数传递

javascript - 如何将元素本身和同一函数中的事件作为参数传递

问题描述

我有一个内联事件处理程序，例如<div onclick="checkFunction()">. 我知道是否要传递使用此关键字的元素，但除了元素之外，我还想传递事件，因为我在这个 div 中有其他元素，我想根据 event.target 做一些事情。我应该怎么办？

标签： javascript

解决方案

我建议永远不要使用onxyz-attribute-style 事件处理程序，但如果你正在使用它们，你这样做的方式是传递event：

<div onclick="checkFunction(this, event)">`

处理程序的第一个参数是元素，第二个是事件。

这种样式的处理程序在范围内的环境中执行event，因为它是局部变量（所有现代浏览器）或全局变量（旧 Microsoft IE）（或两者兼而有之，因为全局现在在规范中，甚至 Firefox 添加最后）。无论哪种方式，它都在引号中的代码范围内，因此您可以使用它将事件作为第二个参数传递给事件处理函数。

但是这种风格的处理程序只能调用全局函数，这是避免使用它们的一个原因，并且某些函数名称会搞砸你（例如animate），这是避免使用它们的另一个原因。相反，我建议使用以下方式连接处理程序addEventListener：

<div id="some-id">`

document.getElementById("some-id").addEventListener(checkFunction);
// ...
function checkFunction(event) {
    // Here you can use `this` or `event.currentTarget` to access the element,
    // and `event` to access the event
    // ...
}

您不需要使用id，您只需要一些识别元素的方法。您可以使用任何 CSS 选择器来querySelector代替使用getElementById.

推荐阅读