如果你曾经在网站上使用过表单，那么你很可能已经与JavaScript进行了交互。正是这项技术使按钮和下拉菜单之类的东西起作用。但它是什么，它是如何工作的？

立即下载：Java & JavaScript 简介

在这篇文章中，我们将看看 JavaScript 中的 onClick 事件。我们将首先解释它是什么，然后向您展示如何自己使用它。阅读这篇文章后，您将能够使用 JavaScript 为您的网站添加交互性。

什么是 JavaScript onClick 事件？

JavaScript 是一种编程语言，可用于为网站添加交互性。onClick 事件是 JavaScript 中最常用的事件之一。当单击元素时，就会发生这种情况。

例如，假设您的网站上有一个按钮。当用户单击该按钮时，可以使用 onClick 事件执行某些操作。也许您想要显示消息或将用户重定向到另一个页面。无论情况如何，onClick 事件都使它成为可能。

若要使用 onClick 事件，必须向网站添加代码。如果您以前从未编写过代码，请不要担心 - 我们将逐步引导您完成它。

如何使用 onClick 事件？

首先，必须选择要向其添加 onClick 事件的元素。对于我们的按钮示例，我们将使用 <button> 元素。

接下来，向元素添加属性。此属性称为 onClick。此属性的值是单击元素时要运行的代码。

以下是添加 onClick 事件后的代码的外观：

<button onClick=“alert（'Hello， world！'）”>点击我！</按钮>

当用户单击此按钮时，他们将看到一个警报弹出窗口，上面写着：“你好，世界！您可以将消息更改为所需的任何内容。

您也不仅限于显示消息。您还可以使用 onClick 事件来运行其他 JavaScript 代码。例如，您可以使用以下代码将用户重定向到另一个页面：

<button onClick=“window.location = 'http://www.example.com'”>Click me！</button>

单击此按钮会将用户重定向到 www.example.com。

如您所见，onClick 事件是向网站添加交互性的强大方式。你可以用它做什么有无限的可能性！

JavaScript onClick 事件示例

现在我们已经了解了 onClick 事件的基础知识，让我们看一个示例。

在此示例中，我们将创建一个按钮，单击该按钮时，该按钮将更改页面上文本的颜色。为此，我们需要使用两件事：

1. 点击事件

2. javascript 函数 document.getElementById（）

onClick 事件将用于在单击按钮时运行函数。document.getElementById（） 函数将用于获取页面上的元素，以便我们可以更改其样式。

我们的代码如下所示：

让我们一点一点地分解。

首先，我们有我们的按钮：

<button onClick=“changeColor（）”>Click me！</button>

此按钮添加了 onClick 事件。onClick 事件的值是 changeColor（） 函数。这意味着当单击按钮时，changeColor（） 函数将在单击按钮时运行。

接下来，我们有我们的JavaScript代码：

<script>
function changeColor（） {
document.getElementById（'myText'）.style.color = 'red';
}
</脚本>

这是单击按钮时将运行的代码。首先，我们创建一个名为 changeColor（） 的函数。此函数不接受任何参数。

在我们的 changeColor（） 函数中，我们使用 document.getElementById（） 函数来获取页面上的元素。在本例中，我们获取的元素的 id 为 “myText”。

一旦我们有了我们的元素，我们就可以改变它的风格。在此示例中，我们将 color 属性更改为红色。这将使文本变为红色。

最后，我们有我们的元素：

<p id=“myText”>这是一些文本.</p>

这是一个简单的段落元素。这个元素唯一不同的是它有一个 id 属性。文档将使用此 id 属性.getElementById（） 函数在页面上查找元素。

就是这样！运行此代码时，应在页面上看到一个按钮和一些文本。单击该按钮时，文本应变为红色。

使用 JavaScript onClick 事件的最终提示

以下是使用 onClick 事件的一些最终提示：

• 确保您的代码有效。无效代码可能会导致您的网站出现问题。使用 JSLint 等工具检查代码是否存在错误。

• 在不同的浏览器中测试您的代码。不同的浏览器可以以不同的方式解释代码。确保您的代码在所有主流浏览器中都能按照您希望的方式工作。

• 注意不要过度使用 onClick 事件。如果您过度使用它，您的网站可能会让您的用户感到不知所措和困惑。谨慎使用它，并且仅在有意义时才使用它。

这就是关于onClick事件的全部信息。您现在可以在自己的网站上开始使用它。