问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
告别的时代
    36148

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

    javascript
    阅读 42.2k
    9 个回答
    得票最新
    头像
    hiYoHoo
      2.2k31118
      ✓ 已被采纳

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

      头像
      LL89757
        433139

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

            console.log(this.id)
}

        </script>

        头像
        papersnake
          12k31739

          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>
          头像
          hubyo
            31231420

            事件机制

                    
        <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);
        }
            头像
            疯子好好活
              2.1k3318

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

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

              头像
              枕边书
                4411916
                DomElement=document.getElementById('myid');
DomElement.getAttribute('id');
                头像
                firegood
                  2211

                  e.target.id

                  头像
                  lijsh
                    1.7k217

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

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

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

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

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

                    头像
                    Phoebus_Z
                      21
                      新手上路，请多包涵

                      //获取点击事件对象
                      function getEventJquery(event) {

                      event = event ? event : window.event;
return event.srcElement ? event.srcElement : event.target;

                      }
                      $(".nav").click(function (event) {

                          var obj = getEventJquery(event);
    var $obj = $(obj);
    $("a").removeClass("is-selected");
    $obj.addClass("is-selected");
    alert(obj.id)
});
                      撰写回答
                      你尚未登录，登录后可以
                      • 和开发者交流问题的细节
                      • 关注并接收问题和回答的更新提醒
                      • 参与内容的编辑和改进，让解决方法与时俱进
                      推荐问题
                      宣传栏