在 JavaScript 中獲取 onClick 按鈕 ID
-
使用 JavaScript 中的
This.id方法獲取點選按鈕 ID -
使用 JavaScript 中的
Event.target.id方法獲取點選按鈕 ID -
使用 JavaScript 中的
addEventListener函式獲取單擊按鈕 ID - 使用 jQuery 獲取點選按鈕
本教程介紹瞭如何通過四種不同的方法獲取單擊按鈕的 ID。這些方法是 this.id、event.target.id、addEventListener 和 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>
輸出：
在上面的程式碼塊中，我們有三個具有不同 ID 和 onclick 事件屬性的按鈕。onclick 事件屬性的值是一個函式，其引數是 this.id 或按鈕 ID。
使用 JavaScript 中的 Event.target.id 方法獲取點選按鈕 ID
由於 Event 介面的 target 屬性，你可以在單擊事件期間獲取按鈕 ID。target 屬性是指從使用者那裡獲得點選事件的按鈕元素。
同時，你可以通過 target.id 從 target 屬性中獲取按鈕的 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>
輸出：
使用 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>
輸出：
使用 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>
輸出：
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