本文共 4804 字，大约阅读时间需要 16 分钟。

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

我在想类似的东西：

当然，如果从第一种形式触发事件，则var test应包含id "aaa" ；如果从第二种形式触发事件，则应包含id "bbb" 。

---

#1楼

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

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

如果event.target失败，则event.srcElement于IE的event.srcElement 。 为了阐明以上代码，不需要jQuery，但也可以使用jQuery。

---

#2楼

您可以尝试使用：

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

---

#3楼

尽管在其他帖子中提到了它，但我还是想说明一下：

$(event.target).id未定义

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

event.target.id还提供了id属性。

this.id提供id属性。

和

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

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

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

---

#4楼

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

---

#5楼

与上面答案中提到的事件参数相比，此方法在更高的z-index上起作用：

$("#mydiv li").click(function(){    ClickedElement = this.id;    alert(ClickedElement);});

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

---

#6楼

这两项工作，

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

和

alert(this.id);

---

#7楼

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。

---

#8楼

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

   
    
    
        Item 1    
    
    
        Item 2    
    
    
        Item 3    
    
    
        Item 4    
    
    
        Item 5    
   

和你的JS代码是这样的：

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

由于LI的内容包装在<span> ，因此很有可能会发现itemId是undefined ，这意味着<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()返回所有匹配的后代。

---

#9楼

供参考，试试这个！ 有用！

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

---

#10楼

只需使用this参考

$(this).attr("id")

要么

$(this).prop("id")

---

#11楼

使用可以使用.on事件

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

---

#12楼

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

event.currentTarget

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

---

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

event.target

---

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

document.querySelector("someSelector").addEventListener(function(event){ console.log(event.target); console.log(event.currentTarget);});

有关事件委托的更多信息，您可以在阅读

---

#13楼

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

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

在这里您可以了解更多信息： :

---

#14楼

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

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

---

#15楼

在jQuery中， event.target始终指触发事件的元素，其中event是传递给函数的参数。

$(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");    });});

---

#16楼

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

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

---

#17楼

我正在与

jQuery自动完成

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

---

#18楼

如果是Angular 7.x，则可以获取本机元素及其ID或属性。

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

的HTML：

   
    ...
   

---

#19楼

$(".classobj").click(function(e){    console.log(e.currentTarget.id);})

---

#20楼

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

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

---

#21楼

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

var $el = $(event.target);

这将使您获得单击的来源，而不是单击功能也已分配的元素。 当click事件在父对象EG上时很有用。表行上的click事件需要您单击的单元格

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

转载地址：http://qaogj.baihongyu.com/