获取触发事件的元素的 ID

https://stackoverflow.com/questions/48239

09-06-2019
|

题

有没有办法获取触发事件的元素的 ID？

我在想这样的事情：

<html>
  <head>
    <script type="text/javascript" src="starterkit/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("a").click(function () {
          var test = caller.id;
          alert(test.val());
        });
      });
    </script>
  </head>
  <body>
    <form class="item" id="aaa">
      <input class="title"></input>
    </form>
    <form class="item" id="bbb">
      <input class="title"></input>
    </form>
  </body>

</html>

当然除了 var test 应该包含id "aaa", ，如果事件是从第一个表单触发的，并且 "bbb", ，如果该事件是从第二种形式触发的。

解决方案

在 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("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});

尽管在其他帖子中提到过，但我想阐明这一点：

$(event.target).id 未定义

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

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

this.id 给出 id 属性。

和

$(this).id 未定义。

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

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

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

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

在哪里 event.target 失败了它会回到 event.srcElement 对于IE。澄清一下，上面的代码不需要 jQuery，但也可以与 jQuery 一起使用。

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

'this' 是一个 DOM 当您位于回调函数内部时（在 jQuery 的上下文中），例如，通过单击、each、bind 等调用时的元素。方法。

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

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

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

我们拥有的触发事件的元素事件财产

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/

作为 jQuery 对象的源元素应通过以下方式获取

var $el = $(event.target);

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

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

您可以尝试使用：

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

对于委托事件处理程序，您可能会遇到如下情况：

<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 的内容被包装在 <span>, ，这意味着 <span> 可能会成为事件目标。您可以通过一个小检查来解决这个问题，如下所示：

$(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()）来搜索它。你不需要使用 .first() 使用时 .closest(), ，因为它只返回第一个匹配的祖先元素，而 .find() 返回所有匹配的后代。

使用可以使用.on事件

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

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 这里.

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

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

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

这样您将始终获得 id 的（在本例中 li）元素。此外，当单击父元素的子元素时。

this.element.attr("id") 在 IE8 中工作正常。

这两个工作，

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

和

alert(this.id);

只需使用 this 参考

$(this).attr("id")

或者

$(this).prop("id")

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

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

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

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

我正在与

jQuery 自动完成

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

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

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow