在 JavaScript 中获取 onClick 按钮 ID-资源分享

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

使用 JavaScript 中的 `This.id` 方法获取点击按钮 ID

你将通过创建一个在你单击按钮时被激活的函数来做到这一点。因此，当你单击按钮时，该函数将通过 this.id 接收按钮 ID。

尽管 this 的值取决于它的调用方式。在这种情况下，它将引用按钮及其属性，例如按钮 ID。

< 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。

< 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 警报消息。

< 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 > < 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。

< 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 >

使用 JavaScript 中的 This.id 方法获取点击按钮 ID

使用 JavaScript 中的 Event.target.id 方法获取点击按钮 ID

使用 JavaScript 中的 addEventListener 函数获取单击按钮 ID

使用 jQuery 获取点击按钮

使用 JavaScript 中的 `This.id` 方法获取点击按钮 ID

使用 JavaScript 中的 `Event.target.id` 方法获取点击按钮 ID

使用 JavaScript 中的 `addEventListener` 函数获取单击按钮 ID