获取触发事件的元素的ID

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

我想的是:

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

1> samjudson..：

---

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

---

请注意:event.target是被点击的_real_项目.例如,如果您将click事件绑定到div,并且在div内部是P和H2元素 - event.target将返回H2元素或P,如果单击其中一个.无论你点击什么子元素,"this"都会返回你挂起事件的div.

---

不幸的是,event.target不允许访问其自定义属性.要做到这一点,必须使用$(this).attr("organization:thingy");.

---

@ZianChoy - 我不太确定你的"自定义属性"是什么意思,但你可以使用`$(event.target)`如果你需要一个jQuery方法,例如`$(event.target).attr("组织:啄");`.

---

哇!谢谢.没有意识到jQuery抽象得那么好.你摇滚!我认为它仍然具有(this)和(event.target)之间的区别 - 作为绑定事件的对象与接收事件的对象.

---

我想请注意,如果你需要访问事件目标来操作dom,你可以这样做:$(event.target).eq(0).然后,您可以使用通常与dom元素一起使用的任何方法,例如$(event.target).eq(0).find('li').

---

谢谢你和$(这个)之间的差异

---

我使用event.currentTarget.id,event.target.id也可以是子元素

2> 小智..：

---

作为参考,试试吧!有用!

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

---

@gemma另一个解决方案对我不起作用,但是这个解决方案没有.谢谢你迟到了.

---

最佳答案似乎不适用于获取嵌入式SVG中元素的ID.`$(this).attr("id");`的确如此.

---

@dlackey对我来说是一样的,另一个解决方案在我的firefox 12上没有用,但是这个做了.谢谢

---

请记住,如果你的click事件在带有子元素的元素上,`e.target`将为你提供导致事件被触发的确切元素,即使它是一个孩子,而`this`将给你元素该活动附于.

3> 小智..：

---

虽然在其他帖子中提到过,但我想拼出这个:

$(event.target).id 未定义

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

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

this.id 给出id属性.

和

$(this).id 未定义.

当然,差异在于jQuery对象和DOM对象."id"是一个DOM属性,因此您必须在DOM元素对象上才能使用它.

(它绊倒了我,所以它可能绊倒了别人)

---

@artaxerxe这意味着你点击的元素没有id:P; 也不要使用jquery这种东西....使用事件javascript属性反而导致它更快.

4> Ally..：

---

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

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

如果event.target失败,它将落后于event.srcElementIE.澄清上面的代码不需要jQuery,但也适用于jQuery.

---

不使用jQuery意味着在获得完全相同的结果时运行更少的代码行,如上所示.jQuery抽象了js.这是直接的js答案,看看大小!

---

只需要挖掘所有的jQuery垃圾来得到这个答案.谢谢.这比以往更有意义:http://needsmorejquery.com/

5> Espo..：

---

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

'this'当你在一个回调函数(在jQuery的上下文中)时,是一个DOM元素,例如,由click,each,bind等方法调用.

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

---

如果你有像`$(html).click()这样的函数`(这个)将返回html对象而不是被点击的元素

6> 小智..：

---

我动态地从数据库中生成一个表,以JSON接收数据并将其放入表中.每个表行都有一个唯一的ID,这是进一步操作所需的,因此,如果DOM被更改,您需要一个不同的方法:

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

---

哦,是的,这就是我要找的东西.对于较新的"on",它也是一样的,因为"委托"现在已被弃用.我有从DB数据动态创建的复选框,当然它们都有不同的ID,我需要用它来点击时做一些事情.我在这里使用此方法来获取实际点击的ID.在旧学校JS我只是从复选框的HTML中的每个复选框传递了id,但是不能用jQuery事件处理程序模型这样做.

7> Maciej Sikor..：

---

在事件财产中解雇了事件的元素

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/

8> Morvael..：

---

作为jQuery对象的source元素应该通过获取

var $el = $(event.target);

这将使您获得点击的来源,而不是点击功能也被分配的元素.当click事件在父对象EG.a表行上的click事件上,并且您需要单击的单元格时,这可能很有用

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

9> 小智..：

---

您可以尝试使用:

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

10> Isochronous..：

---

在委派事件处理程序的情况下,您可能会遇到以下情况:

    

        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
    });
});

你很可能会发现itemId是undefined,因为LI的内容包含在a中,这意味着它可能是事件目标.您可以通过一个小支票解决这个问题,如下所示:

$(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()返回所有匹配的后代.

11> 小智..：

---

使用可以使用.on事件

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

12> Cris..：

---

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

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

13> Marcel Verwe..：

---

这z-index比上面的答案中提到的event参数更高：

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

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

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