用 extern javascript 替换 onclick、onmouseover 和 onmouseout

Question

我想用 javascript 中的 extern 替换我的 onclick、onmouseover 和 onmouseout 属性，这些属性现在在我的 html 中内联。

html:

<div onclick:"myfunctiononclick()"></div>
<div onmouseover:"myfunctionmouseover()"></div>
<div onmouseout:"myfunctionmouseout()"></div>

javascript：

function myfunctiononclick(){something};
function myfunctiononmouseover(){something};
function myfunctiononmouseout(){something};

我为什么要这样做？因为 chrome 不允许在扩展中使用内联 javascript。

谢谢

顺便说一句，请不要使用 jQuery，所以我知道发生了什么。

Answer 1

以某种方式获取对元素的引用，然后 addEventListener:

document.addEventListener("DOMContentLoaded", function() {
    //This code is ran when the DOM content has been loaded
    //I.E. the elements we are trying to get exist on the page
    var divs = document.querySelectorAll("div");
    divs[0].addEventListener("click", myfunctiononclick, false);
    divs[1].addEventListener("mouseover", myfunctiononmouseover, false);
    divs[2].addEventListener("mouseout", myfunctiononmouseout, false);
}, false);