Question

我在通过javascript添加eventListener时遇到问题。好的，我有一个创建4个锚元素的函数。我想在他们的onmouseover上添加一个事件，调用一个函数来改变他们的backkground颜色。这是代码（查看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上阅读the excellent articles about event handling。

Answer 2

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

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

Answer 3

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

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

因此，

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

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

Answer 4

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

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

它对我有用。所以我希望它会帮助某人：）

使用Javascript DOM添加事件侦听器

4 个答案: