Adding event listeners with 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?

P.S. I also tried a.onmouseover = changeColor(); it gives the same result as a.addEventListener("onmouseover", changeColor()); — Lexus de Vinco
– Lexus de Vinco, Commented Mar 22, 2013 at 22:43

Felix Kling · Accepted Answer · 2013-03-22 22:44:04Z

6

There is no such event onmouseover, the event is called mouseover.
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.

answered Mar 22, 2013 at 22:44

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lexus de Vinco Over a year ago

Thank you for an informative answer. Though I have 2 questions. 1. What is the difference between mouseoverand onmouseover? 2. Is the function reference you mentioned just the name of the function but without the parentheses for parameters?

Felix Kling Over a year ago

1: The event name is always without on. DOM elements and HTML elements have the properties/attributes on<event-name> for assigning some code which should be execute "on" the occurrence of the event. 2: Yes, a function is just like any other value (string, array, boolean). In var foo = "bar";, foo references a string. In function foo(){} or var foo = function(){};, foo references a function. foo() would call that function.

Lexus de Vinco Over a year ago

Thank you again for an informative answer. I think this was an educational post and I accepted your answer so would you upvote my question for me and also for the other users who need information on this issue? Also thanks for the article I will make sure to read it!

Pointy · Accepted Answer · 2013-03-22 22:43:40Z

4

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().

answered Mar 22, 2013 at 22:43

Pointy

415k62 gold badges600 silver badges631 bronze badges

Comments

dinesh_malhotra · Accepted Answer · 2014-03-05 07:33:18Z

1

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

answered Mar 5, 2014 at 7:33

dinesh_malhotra

1,87717 silver badges10 bronze badges

Comments

Honza Kopecky · Accepted Answer · 2013-12-01 17:05:09Z

-1

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 :)

answered Dec 1, 2013 at 17:05

Honza Kopecky

431 silver badge9 bronze badges

Collectives™ on Stack Overflow

Adding event listeners with Javascript DOM

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related