向动态创建的元素添加事件的结果很奇怪

Strange result in adding event to a dynamically created element

本文关键字：结果 事件 添加 动态 创建 元素      更新时间：2023-09-26

此代码将运行（至少在Firefox中），并将在指定为具有子菜单的三个元素上创建并附加onmouseover事件处理程序，名称前面有一个_。 它不会将处理程序添加到那些不应该拥有它的人中。

如果我在Firebug中跟踪，一切似乎都工作正常; 也就是说，处理程序附加了正确的id和navtitle。

在浏览器中，正确的元素具有触发的鼠标悬停事件。但是，在每种情况下传递给该事件处理程序的参数都是"6"和"其他"，尽管事实上甚至没有事件处理程序附加到"其他"。 我想我已经正确确定了所有范围，所以我不明白为什么会发生这种情况。

我在这里错过了什么？

谢谢！

我将向其添加子元素的父元素

var navdiv = document.getElementById('nav') 
var navarray = ['','Home', '_Books', '_Pictures', '_Characters','Other']

水平菜单

var nnav = navarray.length
for (var ii = 1; ii < nnav; ii++) 
{
// get title and determine whether it has a submenu
var subflag = false
var navtitle = navarray[ii]
var firstchar = navtitle[0]
if (firstchar == '_') 
{
    navtitle = navtitle.substring(1, navtitle.length - 1)
    navtitle += '*'
    subflag = true
}

// Create Div
var naventry = document.createElement('div')
var navid = 'nav' + navarray[ii]
naventry.setAttribute('id', navid)
naventry.setAttribute('class', 'navitem')
// Create Link
var lnk = document.createElement('a')
lnk.setAttribute('href', navarray[ii] + '.html')
if (subflag) // will have a submenu
{
    lnk.onmouseover = function () { dropmenu(ii, navtitle) }
}
var txtnode = document.createTextNode(navtitle)
lnk.appendChild(txtnode)
naventry.appendChild(lnk)
navdiv.appendChild(naventry)
lnk = null
}
function dropmenu(which, ntitle) 
{
alert('In drop menu: Id = ' + which + '  ' + ntitle)
return false;
}

更改此内容，

if (subflag) // will have a submenu
{
    lnk.onmouseover = function () { dropmenu(ii, navtitle) }
}

对此

if (subflag) // will have a submenu
{
    (function(i){
        lnk.onmouseover = function () { dropmenu(i, navtitle) }
    })(ii);
}

我希望它能解决问题。

dropmenu(ii, navtitle) 是

原因，因为当循环终止时ii等于nnav。 您需要拍摄ii的快照并将其传递给dropmenu。

尝试像这样分配mouseover处理程序：

lnk.onmouseover = function () {
    return function () {
        dropmenu(ii, navtitle);
    }
};

这使处理程序成为闭包，它将在创建处理程序时保留 ii 和 navtitle 的值。

相关文章：