获取触发事件的元素的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"，如果事件是由第一个表单触发的，以及"bbb"，如果事件是由第二个表单触发。

Anant Singh---Alive to Die
已编辑的问题 14日 十二月 2017 в 7:04
编程
javascript jquery
7日 九月 2008 в 8:09
27 种观点
对该问题的评论 (2)
解决办法

在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");
    });
});
Jack Bashford
编辑本段答案15日 五月 2019 в 5:24
评论(13)

作为参考，试试这个!它是有效的!

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

虽然在其他帖子中也有提到，但我还是想把这个问题说清楚。

$(event.target).id未定义。

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

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

this.id给出了id属性。

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

$(this).id是未定义的。

当然，区别在于jQuery对象和DOM对象之间。 "id&quot.是一个DOM属性，所以你必须在DOM元素对象上才能使用它。 是一个DOM属性，所以你必须在DOM元素对象上才能使用它。

(它绊住了我，所以可能绊住了别人)

dun
编辑本段答案9日 五月 2018 в 3:45
评论(3)

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

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

当event.target失败时，就会回到IE的event.srcElement上。 澄清一下，上面的代码不需要jQuery，但也可以和jQuery一起使用。

评论(3)

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

'this'是一个DOM元素，当你在一个回调函数内（在jQuery的上下文中），例如，被点击，每个，绑定等方法调用。

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

评论(1)

我从数据库中动态生成一个表，接收JSON中的数据，并将其放入一个表中。 每个表的行都有一个唯一的 "ID"，这个ID需要进一步的操作，所以，如果DOM被改变，你需要一个不同的方法。

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});
Alexander Elgin
编辑本段答案8日 二月 2016 в 3:13
评论(1)

在event属性中，我们有一个触发事件的元素。

event.currentTarget

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

我们有的最多的嵌套节点开始冒泡的过程，在

event.target

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

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

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

});

。

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

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

});

更多关于活动代表团的信息您可以阅读http://maciejsikora.com/standard-events-vs-event-delegation/

评论(0)

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

var $el = $(event.target);

这可以得到点击的源头，而不是点击函数被分配的元素。 当点击事件发生在父对象上时，这很有用。 例如，在表格行上发生了一个点击事件，而你需要被点击的单元格。

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

你可以尝试使用。

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

在委托事件处理程序的情况下，你可能会有这样的东西。

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

评论(2)

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

$('selector').on('click',function(e){
    log(e.currentTarget.id);
    });
Cris
编辑本段答案13日 九月 2019 в 10:48
评论(0)

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

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

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

这样，你将始终得到（在本例中是li）元素的id。 同样，当点击父元素的子元素时......。

评论(0)

使用可以使用.on事件

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });
评论(0)
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[此处](http://jsfiddle.net/npvrx6sg/)。

评论(2)

只需使用 "this "参考。

$(this).attr("id")

或

$(this).prop("id")
评论(1)

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

Angel Politis
编辑本段答案13日 六月 2016 в 11:11
评论(0)

这两个工作。

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

和

alert(this.id);
评论(0)

你可以使用这个函数来获取改变的项目的id和值（在我的例子中，我使用了一个Select标签。

              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );
评论(0)
 
$(".classobj").click(function(e){
    console.log(e.currentTarget.id);
})
barbsan
编辑本段答案21日 八月 2019 в 9:10
评论(1)

我在和

jQuery Autocomplete

我试着按照上面的描述寻找一个 "事件"，但当请求函数启动时，它似乎并不可用。 我使用this.element.attr("id")来获取元素'的ID，似乎效果不错。

评论(0)