获取触发事件的元素的 ID

【问题标题】：Getting the ID of the element that fired an event获取触发事件的元素的 ID
【发布时间】：2010-09-08 01:47:07
【问题描述】：

有什么方法可以获取触发事件的元素的 ID？

我在想这样的事情：

$(document).ready(function() {
  $("a").click(function() {
    var test = caller.id;
    alert(test.val());
  });
});
<script type="text/javascript" src="starterkit/jquery.js"></script>

<form class="item" id="aaa">
  <input class="title"></input>
</form>
<form class="item" id="bbb">
  <input class="title"></input>
</form>

当然除了 var test 应该包含 id "aaa"（如果从第一个表单触发事件）和 "bbb"（如果从第二个表单触发事件）。

【问题讨论】：

  • 你的例子有点奇怪。您将点击事件附加到“a”，但没有任何锚点。将其更改为 $('input.title').click(...) 对于您问题的未来读者来说会更清楚一些。
  • 您可以在事件处理程序中使用event.target.id 来获取触发事件的元素的ID。
  • 您可以将event作为点击回调函数的参数，然后使用event.target.id

标签： javascript jquery dom-events


【解决方案1】：

在 jQuery 中event.target 总是指触发事件的元素，其中event 是传递给函数的参数。 http://api.jquery.com/category/events/event-object/

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

还要注意this 也可以工作，但它不是一个 jQuery 对象，所以如果你想在它上面使用一个 jQuery 函数，那么你必须将它称为$(this)，例如：

$(document).ready(function() {
    $("a").click(function(event) {
        // this.append wouldn't work
        $(this).append(" Clicked");
    });
});

【讨论】：

  • 哇！谢谢。没有意识到 jQuery 抽象得这么好。你摇滚！我认为 (this) 和 (event.target) 之间仍然存在差异——将事件绑定到的对象与接收事件的对象。
  • 不幸的是，event.target 不允许访问其自定义属性。为此，必须使用 $(this).attr("organization:thingy");.
  • @ZianChoy - 我不太清楚您所说的“自定义属性”是什么意思，但如果您需要 jQuery 方法，可以使用 $(event.target)，例如 $(event.target).attr("organisation:thingy");。
  • 请注意，event.target 是被点击的真实项。例如，如果您将单击事件绑定到 div，并且该 div 内部是 P 和 H2 元素 - event.target 将返回 H2 元素或 P，如果单击其中之一。 "this" 将真正返回您挂起事件的 div，无论您单击了哪个子元素。
  • 我使用 event.currentTarget.id ， event.target.id 也可以是子元素
【解决方案2】：

作为参考，试试这个！有效！

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});

【讨论】：

  • @gemma 另一种解决方案对我不起作用，但这个解决方案可以。谢谢你迟到。
  • @dlackey 这对我来说是一样的，另一种解决方案在我的 firefox 12 上不起作用，但这个解决方案可以。谢谢
  • 最佳答案似乎不适用于获取嵌入式 SVG 中元素的 ID。 $(this).attr("id"); 确实如此。
  • 请记住，如果您的 click 事件发生在具有子元素的元素上，e.target 会为您提供导致事件被触发的确切元素，即使它是子元素，而 this将为您提供事件附加到的元素。
【解决方案3】：

虽然在其他帖子中提到过，但我想把它拼出来：

$(event.target).id 未定义

$(event.target)[0].id 给出 id 属性。

event.target.id 也给出了 id 属性。

this.id 给出 id 属性。

和

$(this).id 未定义。

当然，区别在于 jQuery 对象和 DOM 对象之间。 “id”是一个 DOM 属性，因此您必须在 DOM 元素对象上才能使用它。

（它绊倒了我，所以它可能绊倒了其他人）

【讨论】：

  • 对我来说，event.target.id 什么也没给！
  • @artaxerxe 这意味着您点击的元素没有 id :P;也不要将 jquery 用于此类事情....使用事件 javascript 属性代替它会更快。
  • $(event.target).attr('selector'); 非常适合我。
【解决方案4】：

对于所有事件，不仅限于您可以使用的 jQuery

var target = event.target || event.srcElement;
var id = target.id

如果event.target 失败，它会退回到 IE 的event.srcElement。 为了澄清上面的代码不需要jQuery，但也可以使用jQuery。

【讨论】：

  • 不使用 jQuery 意味着运行更少的代码行而获得完全相同的结果，如上所示。 jQuery 抽象出 js。这是直接js回答，看大小！
  • 只使用'this'关键字不是更好吗？它总是可以让您访问调用事件的元素的属性？
  • 只需要挖掘所有的 jQuery 废话就可以得到这个答案。谢谢。这比以往任何时候都更重要：needsmorejquery.com
  • 太棒了，真的帮了我
【解决方案5】：

您可以使用(this) 来引用触发该函数的对象。

'this' 是一个 DOM 元素，当你在一个回调函数内部时（在 jQuery 的上下文中），例如，被 click、each、bind 等方法调用。

您可以在这里了解更多信息：http://remysharp.com/2007/04/12/jquerys-this-demystified/

【讨论】：

  • 如果你有像$(html).click()这样的函数（this）将返回html对象而不是点击的元素
【解决方案6】：

我从数据库中动态生成表，以 JSON 格式接收数据并将其放入表中。每个表格行都有一个唯一的ID，这是进一步操作所必需的，因此，如果 DOM 被更改，您需要一种不同的方法：

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});

【讨论】：

  • 哦，是的，这就是我要找的。它也适用于较新的“on”，因为现在不推荐使用“delegate”。我有从数据库数据动态创建的复选框，当然它们都有不同的 ID，我需要在单击时使用它们来执行某些操作。我在这里使用了这个方法来获取实际点击了哪个 ID。在老式的 JS 中，我只是从复选框的 HTML 中的每个复选框传递了 id，但不能使用 jQuery 事件处理程序模型这样做。
【解决方案7】：

在 event 属性中触发事件的元素

event.currentTarget

我们得到 DOM 节点 对象，在该对象上设置了事件处理程序。

开始冒泡过程的嵌套节点最多

event.target

事件对象始终是事件处理程序的第一个属性，例如：

document.querySelector("someSelector").addEventListener(function(event){

 console.log(event.target);
 console.log(event.currentTarget);

});

有关事件委托的更多信息您可以阅读http://maciejsikora.com/standard-events-vs-event-delegation/

【讨论】：

    【解决方案8】：

    作为jQuery对象的源元素应该通过

    var $el = $(event.target);

    这将为您提供点击的来源，而不是分配点击功能的元素。当单击事件在父对象上时可能很有用 EG.一个表格行上的点击事件，你需要被点击的单元格

    $("tr").click(function(event){
    var $td = $(event.target);
});

    【讨论】：

      【解决方案9】：

      这适用于大多数类型的元素：

      $('selector').on('click',function(e){
    log(e.currentTarget.id);
    });

      【讨论】：

        【解决方案10】：

        你可以尝试使用：

        $('*').live('click', function() {
 console.log(this.id);
 return false;
});

        【讨论】：

          【解决方案11】：

          使用可以使用.on事件

            $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });

          【讨论】：

            【解决方案12】：

            在委托事件处理程序的情况下，您可能会遇到这样的情况：

            <ul>
    <li data-id="1">
        <span>Item 1</span>
    </li>
    <li data-id="2">
        <span>Item 2</span>
    </li>
    <li data-id="3">
        <span>Item 3</span>
    </li>
    <li data-id="4">
        <span>Item 4</span>
    </li>
    <li data-id="5">
        <span>Item 5</span>
    </li>
</ul>

            你的 JS 代码是这样的：

            $(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId = $target.data('id');

        //do something with itemId
    });
});

            您很可能会发现 itemId 是 undefined，因为 LI 的内容包含在 &lt;span&gt; 中，这意味着 &lt;span&gt; 可能是事件目标。你可以通过一个小检查来解决这个问题，如下所示：

            $(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target).is('li') ? $(event.target) : $(event.target).closest('li'),
            itemId = $target.data('id');

        //do something with itemId
    });
});

            或者，如果您希望最大限度地提高可读性（同时避免不必要的 jQuery 包装调用重复）：

            $(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId;

        $target = $target.is('li') ? $target : $target.closest('li');
        itemId = $target.data('id');

        //do something with itemId
    });
});

            在使用事件委托时，.is() 方法对于验证您的事件目标（除其他外）是否确实是您所需要的非常宝贵。使用.closest(selector) 向上搜索DOM 树，使用.find(selector)（通常与.first() 结合，如.find(selector).first()）向下搜索。使用.closest()时不需要使用.first()，因为它只返回第一个匹配的祖先元素，而.find()返回所有匹配的后代。

            【讨论】：

            • 有用！我在我的情况下进行了调整，因为我只有一个简单的
            • ，所以我使用了 itemId = $target.attr('id')。
          • 在使用简单的 ID 属性时要小心，因为每个 ID 在该页面上都必须是唯一的。因此，如果您出于某种原因需要在该页面上有两个类似的列表，您可能会得到重复的 ID，这是一件坏事。这就是为什么我倾向于总是使用 data-id 来应对未来。
            • 【解决方案13】：

            这适用于比上述答案中提到的事件参数更高的z-index：

            $("#mydiv li").click(function(){

    ClickedElement = this.id;
    alert(ClickedElement);
});

            这样您将始终获得（在本例中为li）元素的id。当点击父元素的子元素时也是如此。

            【讨论】：

              【解决方案14】： 
              var buttons = document.getElementsByTagName('button');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
    buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
    // do something based on button selection here...
    alert(this.id);
}

              工作 JSFiddle here.

              【讨论】：

              • 我认为这有点像使其工作的过时选项
              • @ArnasPečelis 过时了吗？不，只是不是 jQuery。
              【解决方案15】：

              只需使用this 参考

              $(this).attr("id")

              或

              $(this).prop("id")

              【讨论】：

              • 从分配了click() 的元素中获取属性id。如果您需要向该方法传输更多数据，则需要data-some-id="&lt;?php $someId; ?&gt;"，然后您可以`$(this).data("some-id") 来检索它。
              【解决方案16】： 
              $(".classobj").click(function(e){
    console.log(e.currentTarget.id);
})

              【讨论】：

              • @ManuelMannhardt 此答案中没有链接，这是仅代码的答案，而不是仅链接的答案
              【解决方案17】：

              this.element.attr("id") 在 IE8 中运行良好。

              【讨论】：

                【解决方案18】：

                这两种方法都有效，

                jQuery(this).attr("id");

                和

                alert(this.id);

                【讨论】：

                  【解决方案19】：

                  纯JS更简单

                  aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.log(test) 
}


                  aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.log(test) 
}
                  <form class="item" id="aaa">
  <input class="title"/>
</form>
<form class="item" id="bbb">
  <input class="title"/>
</form>

                  【讨论】：

                  【解决方案20】：

                  您可以使用该函数获取更改项的 id 和值（在我的示例中，我使用了 Select 标记。

                                $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );

                  【讨论】：

                    【解决方案21】：

                    我正在合作

                    jQuery 自动完成

                    如上所述，我尝试查找event，但是当请求函数触发时，它似乎不可用。我使用this.element.attr("id") 来获取元素的ID，它似乎工作正常。

                    【讨论】：

                      【解决方案22】：

                      在 Angular 7.x 的情况下，您可以获得原生元素及其 id 或属性。

                      myClickHandler($event) {
    this.selectedElement = <Element>$event.target;
    console.log(this.selectedElement.id)
    this.selectedElement.classList.remove('some-class');
}

                      html:

                      <div class="list-item" (click)="myClickHandler($event)">...</div>

                      【讨论】：

                        【解决方案23】：

                        已经有很多方法可以做到这一点和示例，但是如果您需要更进一步并需要防止在表单上输入回车键，但仍然需要在多行文本区域中使用它，那么它会变得更加复杂。以下将解决问题。

                        <script>
    $(document).ready(function() {
      $(window).keydown(function(event){
        if(event.keyCode == 13) {
           //There are 2 textarea forms that need the enter key to work.
            if((event.target.id=="CommentsForOnAir") || (event.target.id=="CommentsForOnline"))
            {
                // Prevent the form from triggering, but allowing multi-line to still work.
            }
            else
            {
                event.preventDefault();
                return false;
            }         
        }
      });
    });
</script>

<textarea class="form-control" rows="10" cols="50" id="CommentsForOnline" name="CommentsForOnline" type="text" size="60" maxlength="2000"></textarea>

                        它可能会更简化，但你明白这个概念。

                        【讨论】：

                        • 单 = 在 if?
                        猜你喜欢
                        相关资源
                        最近更新 更多
                        热门标签
                        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode