在 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 中使影象可點擊。這可以在各種情況下使用，並取決於您希望為您的網站實現什麼樣的功能。