javascript - 使用 Javascript DOM 添加事件监听器

Question

我在通过 javascript 添加 eventListener 时遇到问题。好的，我有一个创建 4 个 anchor 元素的函数。我想给他们添加一个事件 onmouseover 调用一个函数来改变他们的背景颜色。这是代码(查看 createAnchor() 的倒数第二行以找到相关代码行。

function createAanchor(index) { 
            var a = document.createElement("a");
            var text = getText(index);
            var a = document.createElement("a");
            var t = document.createTextNode(text);
            a.href = getHref(index);
            a.appendChild(t);
            a.style.textAlign = "center";
            a.style.fontSize = "1.2em";
            a.style.color = "white";
            a.style.fontFamily = "arial";
            a.style.fontWeight = "bold";
            a.style.textDecoration = "none";
            a.style.lineHeight = "238px";
            a.style.width = "238px";
            a.style.margin = "5px";
            a.style.background = eightColors(index);
            a.style.position = "absolute";
            a.addEventListener("onmouseover", changeColor());
            return a;
    }

    function changeColor() {
        alert("EVENT WORKING");
    }

好的，问题来了。当函数到达 a.addEventListener("onmouseover", changeColor()); 时，function changeColors() 会执行，但稍后不会在 onmouseover 上执行这是为什么？

Answer 1

1. 没有这样的事件 onmouseover，该事件称为 mouseover。
2. 您必须将函数引用传递给 addEventlistener。 () 调用函数，正如您已经注意到的，所以...不要调用它。

它应该是这样的:

a.addEventListener("mouseover", changeColor);

我推荐阅读 the excellent articles about event handling在 quirksmode.org 上。