Adding mouseover event to a javascript created DIV

Question

Im currently getting data from Google places and am dynamically creating the div to display the results. I am trying to add a mouseover event to each div yet am having no luck implementing it. Ive check the html source and it seems to not add the event for any of the created DIV's.

JS:

for (var i = 0; i < relatedProperties.length; i++) {
    var div = document.createElement("div");

    div.innerHTML = relatedProperties[i].formatted_address;
    div.className = "item_holder";
        div.onmouseover = PanToMarker(relatedProperties[i].formatted_address);
        document.getElementById('relatedpropertyDIV').appendChild(div);

    }

function PanToMarker(address) {
     //Grabs the address and pans to it on the map.
}

Answer 1

I would imagine you need to wrap your onmouseover function like this:

div.onmouseover = function() {
    PanToMarker(relatedProperties[i].formatted_address);
};

This is because when you click on the element, the onmouseover function gets called with no arguments. When you specify arguments to PanToMarker like in your question, instead of assigning the function as may be intuitive, instead it executes the function then and there, and then assigns the function's output. Wrapping the function like this assures that the function doesn't get called instead while you're trying to assign it.

Answer 2

When you add the onmouseover event handler in this manner, you will not see it in the dom.

I would recommend that you store the index as a data property in the DOM. Then you will be able to access it from the mouseover method ...

for (var i = 0; i < relatedProperties.length; i++) {
    var div = document.createElement("div");

    div.innerHTML = relatedProperties[i].formatted_address;
    div.setAttribute('data-index', i);
    div.className = "item_holder";
    div.onmouseover = PanToMarker;
    document.getElementById('relatedpropertyDIV').appendChild(div);
}

function PanToMarker() {
    var selectedIndex = this.getAttribute('data-index');
    map.panTo(relatedProperties[selectedIndex].geometry.location);
}

There may be performance implications since you will be appending i elements to the DOM, each of which may cause a re-draw. It might be better to create all the elements first, then append once.

var section = document.createElement('section');
for (var i = 0, length = relatedProperties.length; i < length; i++) {
    var div = document.createElement("div");

    div.innerHTML = relatedProperties[i].formatted_address;
    div.setAttribute('data-index', i);
    div.className = "item_holder";
    div.onmouseover = PanToMarker;
    section.appendChild(div);
}

document.getElementById('relatedpropertyDIV').appendChild(section);

function PanToMarker() {
    var selectedIndex = this.getAttribute('data-index');
    map.panTo(relatedProperties[selectedIndex].geometry.location);
}