触发事件的元素的Javascript返回id

我有一系列的div（项目），其中有一个display:none-ed覆盖容器，包含其他信息。
如果鼠标进入外部div，该覆盖容器将接收另一个类，使其可见。鼠标离开类时，应删除该类。
我使用onmouseover=“setactive（'divid'）”解决了这个问题，但它使代码看起来非常混乱，所以我尝试切换到Eventlisteners。但这行不通，我也不知道为什么。 这是我目前的脚本：

// Init Eventlisteners for each container

        window.addEventListener("load", start, false);
        function start() {
            var project_containers = document.getElementsByClassName('content-project')
            for (var i = 0; i < project_containers.length; i++) {
                project_containers[i].addEventListener("mouseover", setactive(), false)
                project_containers[i].addEventListener("mouseout", setinactive(), false)
            }
        }



// If mouse is over container, add overlay_active class

        function setactive() {
            var container = document.getElementById(event.currentTarget);
            var overlay_class = container.getElementsByClassName("element-overlay")[0];
            if (!(overlay_class.className.match(/(?:^|\s)overlay_active(?!\S)/))) {
                overlay_class.className += " overlay_active";
            }
        }



// If mouse is outside the container again, remove overlay_active class

        function setinactive() {
            var container = document.getElementById(event.currentTarget);
            var overlay_class= container.getElementsByClassName("element-overlay")[0];
            if (overlay_class.className.match(/(?:^|\s)overlay_active(?!\S)/)) {
                overlay_class.className = overlay_class.className.replace(/(?:^|\s)overlay_active(?!\S)/g, '')
            }
        }

//每个容器的Init Eventlisteners
window.addEventListener（“加载”，开始，错误）；
函数start（）{
var project_containers=document.getElementsByClassName（'content-project'）
对于（var i=0；i

您不需要id来设置

容器

，您的函数可以如下所示：

function setinactive(e) {
    var container = e.currentTarget;
        //your code
    }
}

然后是电话：

project_containers[i].addEventListener("mouseout", setinactive, false);

---

试试

event.currentTarget.id

-看看这里-我使用的是纯JavaScript，没有jQuery…你不需要jQuery-

event.currentTarget不是jQuery对象，它是一个DOM节点。

还将事件传递到事件处理程序-setactive（事件）当您将函数添加为侦听器时，不要调用它。从技术上讲，您甚至不需要id，只需执行-

event.currentTarget.getElementsByClassName（）

。也看看这里---^^这就是我的意思！为什么不直接使用

这个
var overlay_class=this.querySelector（“.element overlay”）“this”是侦听器绑定到的元素，event.target或event.currentTarget是鼠标悬停在其上的DOM节点。。。有一个微妙而令人讨厌的区别。querySelector也没有跨浏览器友好。而且，它只返回一个元素，所以您需要querySelectorAll@ChrisIPowell
e.currentTarget
和
此
引用相同的元素。而且
querySelector
比
getElementsByClassName
更具跨浏览器性，而且如果您查看OP提供的代码段，
querySelector
这正是他需要的。可以使用.bind（）更改“this”。currentTarget将始终提供一致的行为。。。我怀疑所有这些都超出了OP所担心的范围。没有理由不使用e.currentTarget。如果您想使它更整洁，可以像Jonathan那样将其分配给变量。