使用Javascript DOM添加事件监听器

Question

我在通过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 中它并没有被执行。为什么呢？

- Lexus de Vinco

---

我也尝试过 a.onmouseover = changeColor();，它的效果与 a.addEventListener("onmouseover", changeColor()); 相同。 - Lexus de Vinco

Answer 1

1. 没有onmouseover事件，正确的事件名应该是mouseover。
2. 你需要传递一个函数引用给addEventlistener，()会调用函数，正如你已经注意到的一样，所以...不要调用它。

应该这样写：

a.addEventListener("mouseover", changeColor);

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

- Felix Kling

---

谢谢你提供这么详尽的回答。但我有两个问题：1.mouseover和 onmouseover之间有什么区别？2.你提到的函数参考是指函数名称但不带参数括号吗？ - Lexus de Vinco

1: 事件名称始终不包含 on。DOM元素和HTML元素具有属性/属性on<event-name>，用于分配一些代码，该代码应在事件发生时执行。 2: 是的，函数就像任何其他值（字符串、数组、布尔值）一样。在 var foo = "bar"; 中，foo 引用一个字符串。在 function foo(){} 或 var foo = function(){}; 中，foo 引用一个函数。foo() 将调用该函数。 - Felix Kling

再次感谢您提供的信息丰富的答案。我认为这是一篇很有教育意义的帖子，我已经接受了您的答案，所以您能否为我的问题点赞，也为其他需要了解此问题的用户点赞？同时，感谢您提供的文章，我一定会仔细阅读！ - Lexus de Vinco

Answer 2

这是因为你写成了changeColors()，而不是只写 changeColors。括号()告诉 JavaScript 调用该函数。

换句话说，单独的changeColors是对该函数的引用，而changeColors()则是对该函数的引用，同时调用了该函数。函数调用后的结果（函数的返回值）最终传递给addEventListener()。

- Pointy

Answer 3

我认为我们需要理解何时使用事件类型的前缀“on”。在IE 8或更早版本中，我们使用attachEvent和detachEvent，它们相当于addEventListener和removeEventListener。这些方法有一些不同点，但对于这个问题来说并不重要。

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

因此，

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

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

- dinesh_malhotra

Answer 4

我也需要做类似的事情。我在我的地图上有一个信息窗口，我需要处理该信息窗口中段落的点击事件。所以我是这样做的：

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

这对我很有效，希望能帮到其他人 :)

- Honza Kopecky