javascript - 怎么获得当前点击的按钮的id名？-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

javascript - 怎么获得当前点击的按钮的id名？

天蓬老师 2017-04-10 17:48:49

[JavaScript讨论组]

741

我设置了很多个按钮。
点击任意一个按钮，该按钮弹出一个弹窗。
我希望根据按钮的不同，弹窗的内容不同。
需要按钮的id名。

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(8)

高洛峰2017-04-10 17:50:49 8楼

尽量使用event.target.id，不要使用this.id。
当使用事件委托的时候，this指向的是绑定监听事件的元素，而非被点击的元素。event.target.id则始终指向被点击的元素。

赞 +0

添加回复

巴扎黑2017-04-10 17:50:49 7楼

<p id="test">test</p>
<script>
document.getElementById("test").onclick=function(){

    console.log(this.id)
}

</script>

赞 +0

添加回复

阿神2017-04-10 17:50:49 6楼

一般都是绑定一个class，设置一个data-id

监测这个class的点击，然后获取当前点击的data-id

赞 +0

添加回复

PHP中文网2017-04-10 17:50:49 5楼

DomElement=document.getElementById('myid');
DomElement.getAttribute('id');

赞 +0

添加回复

阿神2017-04-10 17:50:49 4楼

e.target.id

赞 +0

添加回复

黄舟2017-04-10 17:50:49 3楼

jquery 的办法

<body>
    

        <input id="t1" type="button" value='fff'>
        <input id="t2" type="button" value='fff'>
        <input id="t3" type="button" value='fff'>
        <input id="t4" type="button" value='fff'>

        <script type="text/javascript">
            $(document).ready(function(){
                $('input').each(function(){
                    alert($(this).attr('id'));
                });
            });
        </script>
  </body>

赞 +0

添加回复

高洛峰2017-04-10 17:50:49 2楼

事件机制

        
        <button class="btn" id="a">aaa</button>
        <button class="btn" id="b">bbb</button>

        var btn = document.getElementsByTagName("button");

        document.body.onclick = function(event){    //冒泡处理
            var id = event.target.id;
            console.log(id);
        }

赞 +0

添加回复

迷茫2017-04-10 17:50:49 1楼

假设你要的按钮是button，那么给button设置点击事件的回调函数：

button.addEventListener('click', function() {});

在事件回调函数中，第一个参数往往是事件对象，这个对象包含了事件相关的很多信息，e.target就是发生点击的实际元素，因此想要到button的ID 直接取e.target.id就行了。

button.addEventListener('click', function(e) {
    console.log(e.target.id);
});

需要补充一点的是，不建议直接给所有button元素逐一添加事件监听，一般是通过事件委托完成的，这方面可再了解下。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>