关于javascript：获取触发事件的元素的ID


Getting the ID of the element that fired an event

是否有任何方法可以获取触发事件的元素的ID？

我在想：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
  <head>
    <script type="text/javascript" src="starterkit/jquery.js">
    <script type="text/javascript">
      $(document).ready(function () {
        $("a").click(function () {
          var test = caller.id;
          alert(test.val());
        });
      });
   
  </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"，如果事件是从第一个窗体激发的，则包含id "aaa"；如果事件是从第二个窗体激发的，则包含"bbb"。

相关讨论

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

1
2
3
4
5
$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

还要注意，this也可以工作，但它不是jquery对象，因此如果您希望对其使用jquery函数，则必须将其称为$(this)，例如：

1
2
3
4
5
6
$(document).ready(function() {
    $("a").click(function(event) {
        // this.append wouldn't work
        $(this).append(" Clicked");
    });
});
相关讨论

作为参考，试试这个！它起作用了！

1
2
3
4
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

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

当event.target失败时，它就落在event.srcElement上。为了澄清上述代码，不需要jquery，但也可以与jquery一起使用。

相关讨论

您可以使用(this)引用启动函数的对象。

当您在回调函数(jquery的上下文中)内时，'this'是一个dom元素，例如，由click、each、bind等方法调用。

以下是您可以了解更多信息的地方：http://remysharp.com/2007/04/12/jquerys-this-demystalized/

相关讨论

我动态地生成一个数据库中的表，接收JSON中的数据并将其放入一个表中。每个表行都有一个唯一的ID，这是进一步操作所必需的，因此，如果修改了DOM，则需要使用不同的方法：

1
2
3
4
$("table").delegate("tr","click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});
相关讨论

在事件属性中激发事件的元素

1
event.currentTarget

我们得到了设置了事件处理程序的DOM节点对象。

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

1
event.target

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

1
2
3
4
5
6
document.querySelector("someSelector").addEventListener(function(event){

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

});

有关事件委派的详细信息，请访问http://maciejsikora.com/standard-events-vs-event-delegation。/

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

1
var $el = $(event.target);

这将使您获得单击的源，而不是为单击函数分配的元素。当Click事件位于父对象上时非常有用例如，表行上的单击事件，您需要单击的单元格

1
2
3
$("tr").click(function(event){
    var $td = $(event.target);
});
相关讨论

您可以尝试使用：

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

在委托事件处理程序的情况下，您可能会有如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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代码是这样的：

1
2
3
4
5
6
7
8
$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId = $target.data('id');

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

您很可能会发现itemID是undefined，因为li的内容被包装在中，这意味着可能是事件目标。你可以用一张小支票来解决这个问题，比如：

1
2
3
4
5
6
7
8
$(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包装调用重复)：

1
2
3
4
5
6
7
8
9
10
11
$(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()返回所有匹配的后代。

相关讨论

使用可以在事件中使用.

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

这在比上述答案中提到的事件参数更高的z-index上工作：

1
2
3
4
5
$("#mydiv li").click(function(){

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

这样，您将始终获得(在本例中为li元素)的ID。也可以单击父元素的子元素。

1
2
3
4
5
6
7
8
9
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);
}

在这里工作。

相关讨论

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

只需使用this参考

1
$(this).attr("id")

或

1
$(this).prop("id")
相关讨论

这两项工作，

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

和

1
alert(this.id);

您可以使用函数获取更改项的ID和值(在我的示例中，我使用了一个select标记)。

1
2
3
4
5
6
7
              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );

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

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

对于角7.x，可以获取本机元素及其ID或属性。

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

HTML：

1
...

我正在和

jQuery Autocomplete

我试着像上面描述的那样寻找一个event，但是当请求函数触发时，它似乎不可用。我用EDOCX1[1]来获取元素的ID，它看起来工作得很好。