4

我无法通过 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这是为什么？

4

4 回答 4

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

应该是这样的：

a.addEventListener("mouseover", changeColor);

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

于 2013-03-22T22:44:04.440 回答
4

这是因为你写的changeColors()而不是仅仅changeColors. ()告诉 JavaScript 调用该函数。

也就是说，changeColorsby本身是对函数的引用，whilechangeColors()是引用函数然后调用它。函数调用的结果（函数的返回值）是最终传递给addEventListener().

于 2013-03-22T22:43:40.237 回答
0

好的，我认为我们需要了解何时在事件类型中使用前缀“on”。在 IE 8 或更低版本的 IE8 中，我们使用 attachEvent 和 detachEvent，它们等效于 addEventListener 和 removeEventListener。这个问题不需要一些差异。

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

因此，

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

    elem.addEventListener("click",listener,[,useCapture]); // other browsers
于 2014-03-05T07:33:18.403 回答
-1

我也需要做类似的事情。我的地图中有一个 infoWindow，我需要处理该 infoWindow 中段落的点击事件。所以我这样做了：

google.maps.event.addListener(infoWindow, 'domready', function() 
     {
        paragraph = document.getElementById("idOfThatParagraph");
        paragraph.addEventListener("click", function()
        {
          //actions that I need to do
        });
    });

这个对我有用。所以我希望它会帮助某人:)

于 2013-12-01T17:05:09.140 回答