Javascript：从事件中获取元素 ID答案

【问题标题】：Javascript: get element ID from eventJavascript：从事件中获取元素 ID
【发布时间】：2014-01-19 01:43:54
【问题描述】：

如何获取作为(e)传递的元素的ID？

window.addEventListener('load', function(){

    var tags = document.getElementsByClassName("tag");
    for (i=0; i<tags.length; i++){
    tags[i].addEventListener('mousedown', function(e){ tagClick(e) }, false);
    }

}, false);

function tagClick(e){

    /* here I'm gonna need the event to cancel the bubble and the ID to work with it*/

    alert('The id of the element you clicked: ' + [?object].id);

    [?object].className='newClass';

    e.stopPropagation();
    e.cancelBubble = true;
}

我需要在 tagClick 中获取元素/对象，以便更改其属性

html:

<div class="tag">
    <img src="/images/tags/sample.jpg"/>
    <label class="tagLabel">Sample</label>
</div>

看，附加事件的元素是 div，但是在使用 e.srcElement 时，ig 给了我图像对象。

【问题讨论】：

您为什么不使用 jQuery？所有这些令人头疼的事情都可以用一行 jQuery 写出来。
@ShadowWizard 因为jQuery is bloody slow?在我的项目中，我也可以在一行中编写一个委托事件处理程序，因为我创建了一个非常具体的函数来完成这项工作。 addDelegatedEvent(document.body,function(t) {return r.nodeName == "TAG";},"click",function(e) {alert(e.target.id);});
@NiettheDarkAbsol 浏览器兼容性如何？这也是使用 jQuery 的主要原因。无论如何，我们不要向这个问题发送垃圾邮件，这些东西都有聊天室。 :)
@ShadowWizard addDelegatedEvent 为我做了浏览器兼容性，因为我将它编程为 ;)
@ShadowWizard 当我学习完 JavaScript 之后，我将使用 JQuery :)

标签： javascript events

【解决方案1】：

当您使用addEventListener 绑定事件侦听器时，它会使用this 调用，指的是您绑定事件的元素。所以this.id 将是元素的id（如果有的话）。

alert('The id of the element you clicked: ' + this.id);

但是你用这条线打破了这一点：

tags[i].addEventListener('mousedown', function(e){ tagClick(e) }, false);

...因为您在中间添加了一个额外的函数，然后调用tagClick 而不设置this。不需要那个额外的功能，把它改成：

tags[i].addEventListener('mousedown', tagClick, false);

...所以this 不会搞砸。或者，如果您更喜欢使用额外功能，请确保使用 Function#call 维护 this：

tags[i].addEventListener('mousedown', function(e){ tagClick.call(this, e) }, false);

...但是没有理由在显示的tagClick 函数中这样做。

（标准）事件对象还具有属性target（可能不是您绑定事件的元素，它很可能是后代）和currentTarget（它将是您绑定事件的元素）。但是如果你使用addEventListener（甚至是attachEvent，在IE上），this是方便可靠的。

【讨论】：

@Azevedo：奇怪的是，我只是在编辑答案，因为我注意到您在 addEventListener 中做了一些奇怪的事情。查看更新。 :-) 很抱歉最初错过了。
tags[i].addEventListener('mousedown', tagClick, false); 似乎更合适。作品。此外，它已经在取消气泡传播[因为我在它粘住之前取消了气泡传播？]
@Azevedo：我没有关注你，你是否添加了额外的功能层与冒泡根本无关。是的，您正在取消冒泡，因此一旦事件从图像冒泡到您要挂接它的元素，您就会在该点停止它。
标签
位于另一个
（背景着色器）中。不知何故，使用tags[i].addEventListener('mousedown', tagClick, false); 而不是tags[i].addEventListener('mousedown', function(e){ tagClick(e) }, false); 我不需要取消冒泡。
@Azevedo 既然你已经接受了很好的答案，让我添加一些活生生的例子；）With Direct binding 和With event delegation

【解决方案2】：

您可以通过e.target获取事件的目标。

但请记住，某些浏览器会将文本节点视为目标，因此请尝试以下操作：

var t = e.target;
while(t && !t.id) t = t.parentNode;
if( t) {
    alert("You clicked element #"+t.id);
}

这将找到第一个实际具有 ID 的元素。

新年快乐！

编辑：再想一想，如果它是您想要引用的“标签”元素本身，只需使用this。在事件处理程序中，this 指的是实际具有处理程序的元素。尽管在这种情况下，您需要将处理程序更改为 ('mousedown', tagClick, false)

或者更好：

document.body.addEventListener("mousedown",function(e) {
    var t = e.target;
    while(t && t.nodeName != "TAG") { // note, must be uppercase
        t = t.parentNode;
    }
    if( t) {
        alert("You clicked on #"+t.id);
    }
},false);

事件处理程序越少越好。

【讨论】：

对于 IE，它是 srcElement。（另见here）
当你直接绑定事件时，而不是while(t && !t.id) t = t.parentNode;，为什么不直接使用e.currentTarget呢？
@ShadowWizard IE 也使用attachEvent。由于OP只使用addEventListener，我只使用target。
@niet：检查 HTML。问题是在 DIV 内点击了一张图片（这就是我想要的）。相反，它给了我图像。
不错，没注意到。