Question

如何获取作为（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会给我图像对象。

Answer 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不会搞砸。或者，如果您希望使用额外功能，请确保使用this维护Function#call：

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

...但是没有理由使用显示的tagClick函数。

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

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

更少的事件处理程序总是更好。

Javascript：从事件中获取元素ID

2 个答案: