在 JavaScript 中的 HTML 图像标签上添加 Onclick 事件

onclick 被添加到 HTML 内部的图像标签上。onclick 事件将使我们的图像可点击。在用户点击图像后，您可以做任何您想做的事情，比如打开一个新的网页、添加动画、用新图像更改现有图像等等。在 onclick 内部，您可以传递一个函数。在这里，您可以创建并调用您用 JavaScript 编写的函数，或者使用 window 对象为我们提供的现有函数，如 window.open()。

本文将展示如何使用 onclick 事件在用户点击图像时在新的浏览器选项卡中显示图像。我们将通过创建一个函数并在 HTML 图像标签的 onclick 属性内部调用它来实现这一点。

使用 JavaScript 在 HTML img 标签上添加 onclick 事件

要在 JavaScript 中实现 onclick 事件功能，我们首先必须创建一个函数，然后在 HTML 内部的图像标签上存在的 onclick 内部调用该函数。在这里，我们取了一张图像，当用户点击这张图像时，图像将在新的浏览器选项卡中打开。我们将在下面的示例中实现这一点。

下面我们有一个基本的 HTML 文档，其内部只有一个 img 标签，其 src 属性设置为从服务器获取的图像。在图像的 onclick 属性上，我们传递 openImg() 函数，它将调用该函数。我们还没有创建这个函数。在文件的末尾，我们链接了我们的 JavaScript 文件来创建我们的函数。请看下面的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- Image taken from Unsplash -->
    <img id="image" src="https://bit.ly/3jFwe3d" alt="Sample image" onclick="openImg()">

    <script src="./script.js"></script>
</body>
</html>

如果您运行上面的代码，它在 Web 浏览器中将是这个样子。

在我们的 JavaScript 文件内部，我们定义了一个函数 openImg()。在这个函数内部，我们首先必须使用其 id 属性 image 来获取对 DOM 内部存在的 img 标签的引用。这可以使用 document.getElementById() 方法来完成。然后，我们将把图像标签的引用存储在 image 变量内部。

由于我们想在新的浏览器选项卡内显示相同的图像，我们还必须将图像源存储在一个变量中，我们可以使用 src 属性来获取它。在 JavaScript 中，我们只需使用 image.src 来访问源属性，然后我们将其存储在 source 变量内部。请注意，image.src 返回图像的完全解析（绝对）URL，这正是新选项卡所需要的。

最后，要使用其源来显示图像，我们可以使用 window.open() 方法。window.open() 方法用于打开一个新的选项卡，我们在这个函数内部传递的任何内容都将显示在新选项卡内部。在这里，我们将传递 source 变量，它包含图像本身的链接。这就是我们的 JavaScript openImg() 函数的样子。

function openImg() {
  var image = document.getElementById('image');
  var source = image.src;
  window.open(source);
}

如果您在 Web 浏览器内部运行上面的代码并点击图像，图像将在新的浏览器选项卡中打开，如下图所示。

HTML onclick 图像属性有助于在 JavaScript 中使图像可点击。这可以在各种情况下使用，并取决于您希望为您的网站实现什么样的功能。