使用Javascript DOM添加事件侦听器

Question

I'm having trouble adding eventListener to through javascript. Ok, I have a function that creates 4 anchor elements. I want to add an event to them onmouseover that calls a function to change their backkground color. Here's the code (look at the next to last line of createAnchor() to find the relevant code line.

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");
    }

Ok here's the problem. When the function gets to a.addEventListener("onmouseover", changeColor()); the function changeColors() executes, but it does not execute later on onmouseover Why is this?

Answer 1

1. There is no such event onmouseover , the event is called mouseover .
2. You have to pass a function reference to addEventlistener . () calls the function, as you already noticed, so... don't call it.

This is how it should be:

a.addEventListener("mouseover", changeColor);

I recommend to read the excellent articles about event handling on quirksmode.org.

Answer 2

It's because you wrote changeColors() instead of just changeColors . The () tell JavaScript to call the function.

In other words, changeColors by itself is a reference to the function, while changeColors() refers to the function and then calls it . The result of the function call (the return value from the function) is what's ultimately passed to addEventListener() .

Answer 3

Ok I think we need to understand when to use the prefix "on" with the event type. In IE 8 or less then IE8 we use attachEvent and detachEvent which are equivalent to addEventListener and removeEventListener. There are some differences which are not required for this question.

While using attachEvent the event type is prefixed with "on" but in addEventListener no prefix is used.

hence,

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

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

Answer 4

I've needed to do something like that too. I have an infoWindow in my map and I need to handle a click event on paragraph in that infoWindow. So I did it like this:

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

It works for me. So I hope it will help someone :)