悬停时的 JavaScript 执行元素特有的操作

Question

我正在尝试为我的网站制作一个基本的 JS 文件，这就是它需要做的。我需要它来挑选所有具有类名“程序”的 div，并根据悬停在哪个“程序”上，执行该元素独有的操作。这是否可能，或者我是否必须采取更具体的步骤并转到定位唯一 ID 或数据属性？

到目前为止我唯一拥有的是:

var programs = document.getElementsByClassName('program');

这是为了获取出现在 DOM 中的所有“程序”的“类数组”列表。然后我想要一个悬停功能，根据悬停在哪个“程序”上，程序 [0]、程序[1]、程序[2] 或程序[3]，执行特定的操作。

请不要使用 jQuery!

Answer 1

可能有很多方法可以做到这一点，但您可以使用 EventListener 来实现。

这是可以做到的:

var x=0;//global variable

    document.addEventListener('DOMContentLoaded',function(){    
    var programs = document.getElementsByClassName('program');

        for(var i=0;i<programs.length;i++){
            programs[i].addEventListener('click',someFtn);
            x=i;
        }

        function someFtn(event){
           console.log(this.id); //it will give you the ID of clicked program
           console.log(x);  // tells which 'i' it was
        }
    });

P.S:以上是Click事件的简单解决方案，Hover事件请自行尝试。这很容易。