在 JavaScript 中獲取 onClick 按鈕 ID

Habdul Hazeez 2023年1月30日
  1. 使用 JavaScript 中的 This.id 方法獲取點選按鈕 ID
  2. 使用 JavaScript 中的 Event.target.id 方法獲取點選按鈕 ID
  3. 使用 JavaScript 中的 addEventListener 函式獲取單擊按鈕 ID
  4. 使用 jQuery 獲取點選按鈕
在 JavaScript 中獲取 onClick 按鈕 ID

本教程介紹瞭如何通過四種不同的方法獲取單擊按鈕的 ID。這些方法是 this.idevent.target.idaddEventListener 和 jQuery。

使用 JavaScript 中的 This.id 方法獲取點選按鈕 ID

你將通過建立一個在你單擊按鈕時被啟用的函式來做到這一點。因此,當你單擊按鈕時,該函式將通過 this.id 接收按鈕 ID。

儘管 this 的值取決於它的呼叫方式。在這種情況下,它將引用按鈕及其屬性,例如按鈕 ID。

<body>
    <main>
        <button id="first_button" onclick="getClickID(this.id)">First Button</button>
        <button id="second_button" onclick="getClickID(this.id)">Second Button</button>
        <button id="third_button" onclick="getClickID(this.id)">Third Button</button>
    </main>

    <script type="text/javascript">
        function getClickID(clickID) {
            alert(clickID);
        }
    </script>
</body>

輸出:

使用 this.id 方法獲取點選按鈕 ID

在上面的程式碼塊中,我們有三個具有不同 ID 和 onclick 事件屬性的按鈕。onclick 事件屬性的值是一個函式,其引數是 this.id 或按鈕 ID。

使用 JavaScript 中的 Event.target.id 方法獲取點選按鈕 ID

由於 Event 介面的 target 屬性,你可以在單擊事件期間獲取按鈕 ID。target 屬性是指從使用者那裡獲得點選事件的按鈕元素。

同時,你可以通過 target.idtarget 屬性中獲取按鈕的 ID。在下面的程式碼示例中,我們建立了一個函式,它使用 event.target.id 來顯示單擊按鈕的 ID。

<body>
    <main>
        <button id="button_1" onclick="getClickID()">Button_1</button>
        <button id="button_2" onclick="getClickID()">Button_2</button>
        <button id="button_3" onclick="getClickID()">Button_3</button>
    </main>

    <script type="text/javascript">
        function getClickID() {
            alert(event.target.id);
        }
    </script>
</body>

輸出:

使用 Event.target.id 方法獲取點選按鈕 ID

使用 JavaScript 中的 addEventListener 函式獲取單擊按鈕 ID

你可以實現一個自定義函式,該函式利用事件偵聽器來獲取元素的 ID。這將是觸發事件的元素。

將自定義函式放在網頁的 <head> 部分。這樣,它在網頁的其餘部分下載之前變得可用。

在以下程式碼中,我們使用自定義函式將點選事件新增到按鈕集。因此,當你在 Web 瀏覽器中執行程式碼時,你將收到一條顯示按鈕 ID 的 JavaScript 警報訊息。

<head>
    <script type="text/javascript">
        const customEvent = (documentObject) => {
            return {
                on: (event_type, css_selector, callback_function) => {
                    documentObject.addEventListener(event_type, function (event) {
                        if (event.target.matches(css_selector) === false) return;
                        callback_function.call(event.target, event);
                    }, false);
                }
            }
        }
        customEvent(document).on('click', '.html-button', function (event) {
            alert(event.target.id);
        });
    </script>
</head>
<body>
    <main>
        <button id="btn_1" class="html-button">Code-1</button>
        <button id="btn_2" class="html-button">Code-2</button>
        <button id="btn_3" class="html-button">Code-3</button>
    </main>
</body>

輸出:

使用 addEventListener 函式獲取點選按鈕 ID

使用 jQuery 獲取點選按鈕

這種方法類似於本文中的第一個示例,但我們將使用 jQuery。jQuery 提供了 click 函式,你可以將其附加到元素以通過 this.id 獲取元素的 ID。

下面的程式碼具有具有 ID 和類屬性的按鈕。我們使用 jQuery 來獲取按鈕類名稱,併為所有按鈕附加一個單擊事件,當你單擊任何按鈕時,你將在 Web 瀏覽器的警報視窗中獲得其 ID。

<body>
    <main>
        <button id="btn_one" class="clicked-button">CK-button-1</button>
        <button id="btn_two" class="clicked-button">CK-button-2</button>
        <button id="btn_three" class="clicked-button">CK-button-3</button>
    </main>

    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"
        referrerpolicy="no-referrer"
    >
    </script>
    <script>
        $('.clicked-button').click(function(){
            alert(this.id);
        })
    </script>
</body>

輸出:

使用 jQuery 獲取點選按鈕

作者: Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

相關文章 - JavaScript Element