在前端开发中，我们常需要通过 JavaScript 来处理用户交互操作。其中，处理元素的点击事件是最常见的需求之一。本文将介绍如何将被点击的元素传递给 JavaScript 的 onclick 函数，并为该元素添加一个类。
获取被点击的元素
在 HTML 中，我们可以使用 onclick 属性来设置元素的点击事件处理函数。当元素被点击时，该函数会被触发。但这个函数并不会自动接收到被点击元素的信息。因此，我们需要手动获取该元素。
有两种主要的方法来获得被点击的元素：
方法 1：传递 this 参考值
在 HTML 中，我们可以将 this 关键字作为参数传递给 onclick 函数。this 表示当前被点击的元素本身，因此我们可以在 onclick 函数内部使用这个参考值来获取该元素。
以下是一个示例代码：
<button onclick="handleClick(this)">点击我</button>
<script>
function handleClick(element) {
// 使用 element 参数来访问该元素
element.classList.add('clicked');
}
</script>在上面的示例中，当按钮被点击时，它的 onclick 函数会被触发，并将 this 关键字作为参数传递给 handleClick 函数。handleClick 函数使用 element 参数来获取被点击的按钮，并为其添加了一个 clicked 类。
方法 2：使用事件监听器
另一种方法是使用 JavaScript 的事件监听器来处理元素的点击事件。在这种情况下，我们可以将事件对象作为参数传递给事件处理函数。事件对象包含有关事件的详细信息，如触发事件的元素、鼠标位置等。
以下是一个示例代码：
-- -------------------- ---- ------- ------- -------------------------- -------- ----- -------- - ------------------------------------ ---------------------------------- --------------- - -- -- ------------ ----------- -------------------------------------- --- ---------
在上面的示例中，我们使用 addEventListener 函数为按钮添加了一个 click 事件监听器。当按钮被点击时，该函数会被触发，并将事件对象作为参数传递给事件处理函数。事件处理函数使用 event.target 属性来获取被点击的按钮，并为其添加了一个 clicked 类。
为被点击的元素添加类
一旦我们获取了被点击的元素，就可以使用 JavaScript 来为其添加一个类。我们可以使用 classList 属性来访问元素的类列表，并使用 add 方法来添加一个新类。
以下是一个完整的示例代码：
-- -------------------- ---- ------- ------- ---------------------------------------- -------- -------- -------------------- - --------------------------------- - --------- ------- -------- - ----------------- ---- - --------
在上面的示例中，当按钮被点击时，它的 onclick 函数会被触发，并将 this 关键字作为参数传递给 handleClick 函数。handleClick 函数使用 element 参数来获取被点击的按钮，并为其添加了一个 clicked 类。该类被定义为具有红色背景颜色的样式。
总结
通过本文，我们学习了如何将被点击的元素传递给 JavaScript 的 onclick 函数，并为该元素添加一个类。我们介绍了两种主要的方法来获取被点击的元素：一种是传递 this 参考值，另一种是使用事件监听器并访问事件对象中的 target 属性。我们还向您展示了如何使用 classList 属性来为元素添加类。
希望这篇
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25677