将鼠标悬停事件添加到javascript创建的DIV

Adding mouseover event to a javascript created DIV

本文关键字：javascript 创建 DIV 添加 鼠标 悬停 事件      更新时间：2023-09-26

我目前从谷歌的地方和动态创建div显示结果的数据。我试图添加一个鼠标悬停事件到每个div，但我没有实现它的运气。我检查了html源代码，它似乎没有为任何创建的DIV添加事件。

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.
}

我想您需要像这样包装您的onmouseover函数:

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

这是因为当您单击元素时，调用onmouseover函数时不带参数。当你像你的问题一样指定参数给PanToMarker时，它不是直观地赋值函数，而是在那里执行函数，然后赋值函数的输出。像这样包装函数可以确保在您尝试为其赋值时不会调用该函数。

当您以这种方式添加onmouseover事件处理程序时，您将不会在dom中看到它。

我建议将索引作为数据属性存储在DOM中。然后，您就可以通过mouseover方法访问它…

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

这可能会影响性能，因为您将把i元素附加到DOM中，每个元素都可能导致重新绘制。最好先创建所有元素，然后追加一次。

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);
}
相关文章：