在Javascript中寻找更高的效率

我正在编写一个web应用程序/游戏，其中有大量可点击的.png图像，当你将鼠标悬停在这些图像上时，这些图像会发光，当你点击它们时，这些图像甚至会瞬间改变。我目前拥有的代码正是我想要它做的，但我注意到有很多冗余，并通过ID获取元素。我想知道是否有比我更精通javascript的人知道更好的编写方法。当然，在根文件夹中，每个“按钮”都有3个.png文件，每个文件表示处于不同状态的pic…（即inventorypic.png、inventorypicglow.png和inventorypicdown.png将是根据“inventorypic”元素的状态在DOM中内外更改的图像文件。）

这里有很多这样的四行块（我只是没有把它们都复制到这里）。。每个按钮一个，看起来有点可笑。有更好的方法吗

---

我还有一个小问题，我想我已经知道答案了，但我只是想检查一下。。。您可以在自定义形状中创建元素，例如在正方形或矩形以外的形状中吗？我想没有，但是如果我错了请告诉我

尝试按ID获取对象一次，然后使用引用

var inventorypic = document.getElementById("inventorypic");
addEvents(inventorypic);    

var refinementpic= document.getElementById("refinementpic");
addEvents(refinementpic); 

var propertiespic = document.getElementById("propertiespic");
addEvents(propertiespic );   

var descriptionpic= document.getElementById("descriptionpic");
addEvents(descriptionpic);    

fucntion addEvents(obj)
{
    obj.addEventListener("mouseover", function(){glowText(this)}, false);
    obj.addEventListener("mouseout", function(){normalText(this)}, false);
    obj.addEventListener("mousedown", function(){downText(this)}, false);
    obj.addEventListener("mouseup", function(){glowText(this)}, false);
}

---

.querySelectorAll（）

。谢谢法哈德，这很有帮助。

var inventorypic = document.getElementById("inventorypic");
addEvents(inventorypic);    

var refinementpic= document.getElementById("refinementpic");
addEvents(refinementpic); 

var propertiespic = document.getElementById("propertiespic");
addEvents(propertiespic );   

var descriptionpic= document.getElementById("descriptionpic");
addEvents(descriptionpic);    

fucntion addEvents(obj)
{
    obj.addEventListener("mouseover", function(){glowText(this)}, false);
    obj.addEventListener("mouseout", function(){normalText(this)}, false);
    obj.addEventListener("mousedown", function(){downText(this)}, false);
    obj.addEventListener("mouseup", function(){glowText(this)}, false);
}