Question

使用 Javascript DOM 添加事件监听器

2013-03-22

10504

javascript addeventlistener

我无法通过 javascript 添加 eventListener。好的，我有一个函数可以创建 4 个锚点元素。我想在 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

不存在 onmouseover 这样的事件，该事件名为 mouseover 。
您必须将函数引用传递给 addEventlistener 。 () 调用该函数，正如您已经注意到的，因此...不要调用它。

应该是这样的：

a.addEventListener("mouseover", changeColor);

我建议阅读 quirksmode.org 上的关于事件处理的优秀文章。

Answer 2

这是因为您编写的是 changeColors() ，而不是 changeColors 。 () 告诉 JavaScript 调用该函数。

换句话说， changeColors 本身是对该函数的引用，而 changeColors() 引用该函数 然后调用它 。函数调用的结果（函数的返回值）最终传递给 addEventListener() 。

Answer 3

好的，我认为我们需要了解何时在事件类型中使用前缀“on”。在 IE 8 或低于 IE8 的版本中，我们使用的附加事件和分离事件相当于 addEventListener 和 removeEventListener。有一些区别对于这个问题来说不是必需的。

使用附加事件时，事件类型以“on”为前缀，但在 addEventListener 中不使用前缀。

因此，

    elem.attachEvent("onclick",listener); // <= IE8

    elem.addEventListener("click",listener,[,useCapture]); // other browsers