获取触发事件的元素的 ID

有什么方法可以获取触发事件的元素的 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" ;如果从第二种形式触发事件,则应包含 id "bbb"

答案

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});
$(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 元素对象上才能使用它。

(它使我绊倒,所以它可能使其他人绊倒了)

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

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

例如,当您位于回调函数(在 jQuery 的上下文中)内部时, 'this'是一个DOM元素,它是由 click,each,bind 等方法调用的。

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

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});
event.currentTarget
event.target
document.querySelector("someSelector").addEventListener(function(event){

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

});
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>
$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId = $target.data('id');

        //do something with itemId
    });
});
$(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
    });
});
$(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
    });
});