在 JavaScript 中获取 onClick 按钮 ID |
您所在的位置：网站首页 › p站id使用方法 › 在 JavaScript 中获取 onClick 按钮 ID |
|
当前位置：主页 > 学无止境 > WEB前端 >
WEB前端
编程语言
网络
算法
操作系统
数据库
在 JavaScript 中获取 onClick 按钮 ID
作者：迹忆客
最近更新：2023/03/11
浏览次数：
本教程介绍了如何通过四种不同的方法获取单击按钮的 ID。这些方法是 this.id、event.target.id、addEventListener 和 jQuery。 使用 JavaScript 中的 This.id 方法获取点击按钮 ID你将通过创建一个在你单击按钮时被激活的函数来做到这一点。因此，当你单击按钮时，该函数将通过 this.id 接收按钮 ID。 尽管 this 的值取决于它的调用方式。在这种情况下，它将引用按钮及其属性，例如按钮 ID。 First Button Second Button Third Button function getClickID(clickID) { alert(clickID); }输出：
在上面的代码块中，我们有三个具有不同 ID 和 onclick 事件属性的按钮。onclick 事件属性的值是一个函数，其参数是 this.id 或按钮 ID。 使用 JavaScript 中的 Event.target.id 方法获取点击按钮 ID由于 Event 接口的 target 属性，你可以在单击事件期间获取按钮 ID。target 属性是指从用户那里获得点击事件的按钮元素。 同时，你可以通过 target.id 从 target 属性中获取按钮的 ID。在下面的代码示例中，我们创建了一个函数，它使用 event.target.id 来显示单击按钮的 ID。 Button_1 Button_2 Button_3 function getClickID() { alert(event.target.id); }输出： 使用 JavaScript 中的 addEventListener 函数获取单击按钮 ID 你可以实现一个自定义函数，该函数利用事件侦听器来获取元素的 ID。这将是触发事件的元素。 将自定义函数放在网页的 部分。这样，它在网页的其余部分下载之前变得可用。 在以下代码中，我们使用自定义函数将点击事件添加到按钮集。因此，当你在 Web 浏览器中运行代码时，你将收到一条显示按钮 ID 的 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); }); Code-1 Code-2 Code-3输出： 使用 jQuery 获取点击按钮 这种方法类似于本文中的第一个示例，但我们将使用 jQuery。jQuery 提供了 click 函数，你可以将其附加到元素以通过 this.id 获取元素的 ID。 下面的代码具有具有 ID 和类属性的按钮。我们使用 jQuery 来获取按钮类名称，并为所有按钮附加一个单击事件，当你单击任何按钮时，你将在 Web 浏览器的警报窗口中获得其 ID。 CK-button-1 CK-button-2 CK-button-3 $('.clicked-button').click(function(){ alert(this.id); })输出：
上一篇：使用 JavaScript 将 ID 添加到元素 下一篇：没有了 相关文章 使用 JavaScript 将 ID 添加到元素发布时间：2023/03/11 浏览次数：191 分类：WEB前端 本教程演示了如何使用 JavaScript 将 ID 属性添加到 HTML 元素。 JavaScript 使用变量作为键发布时间：2023/03/11 浏览次数：54 分类：WEB前端 JavaScript 对象被定义在一个键值对中，其中的键代表唯一的身份，并且值不必一直是独占的。本文我们将在 JavaScript 中使用变量作为键。 在 JavaScript 中声明全局变量发布时间：2023/03/11 浏览次数：180 分类：WEB前端 本教程介绍了如何在 JavaScript 中声明全局变量。 JavaScript 按 ID 删除元素发布时间：2023/03/11 浏览次数：151 分类：WEB前端 本教程教授如何使用 JavaScript 中的 id 删除 html 元素。 在 JavaScript 中访问会话变量发布时间：2023/03/11 浏览次数：191 分类：WEB前端 在本文中，我们将看到如何在 JavaScript 中访问会话变量。 在 JavaScript 中将 ID 添加到 HTML 元素发布时间：2023/03/11 浏览次数：173 分类：WEB前端 在本文中，我们将讨论如何使用 JavaScript 中的 Element.id 属性为 HTML 元素设置 ID。 在 JavaScript 中打印 div 元素的内容发布时间：2023/03/11 浏览次数：64 分类：WEB前端 本教程展示了如何在 JavaScript 中打印 div 元素的内容。 JavaScript 声明多个变量发布时间：2023/03/11 浏览次数：106 分类：WEB前端 本文将讨论使用 JavaScript 声明多个变量的方法。 检查 JavaScript 中的变量是否不为空发布时间：2023/03/11 浏览次数：200 分类：WEB前端 本教程讲解如何在 JavaScript 中检查变量是否不为空。 转载请发邮件至 [email protected] 进行申请，经作者同意之后，转载请以链接形式注明出处 本文地址： |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |