动态生成图片无法添加onmouseover属性，如何解决？

问题描述 #

通过以下JavaScript代码循环生成7行7列的图片元素，尝试为每个图片设置onmouseover属性调用freccia(j)函数，但实际生成的HTML中并未包含该属性：

for (i=0; i<7; i++) {
    lineBreak = document.createElement('br');
    document.body.appendChild(lineBreak);

    for (j=0; j<7; j++) {
        img = new Image();
        img.src = "immagini/c" + 0 + ".png";
        img.id = "i" + (j+1 + (i*7));
        img.onmouseover="freccia(" + j + ")";
        document.body.appendChild(img);
    }
}

原因分析 #

直接给DOM元素的onmouseover赋值字符串是HTML标签属性的写法，但通过JS操作DOM元素时，需要给它赋值函数引用而非字符串。这种字符串写法仅在直接编写HTML标签时有效，用JS动态创建元素时不生效。同时循环中如果不用块级变量保存j，所有事件触发时都会拿到循环结束后的j值（即7），导致逻辑错误。

解决方法 #

方法1：直接赋值函数表达式（配合块级变量） #

for (let i=0; i<7; i++) {
    const lineBreak = document.createElement('br');
    document.body.appendChild(lineBreak);

    for (let j=0; j<7; j++) {
        const img = new Image();
        img.src = "immagini/c0.png";
        img.id = `i${j+1 + i*7}`;
        // 直接绑定函数，let声明的j会保留当前循环的数值
        img.onmouseover = function() {
            freccia(j);
        };
        document.body.appendChild(img);
    }
}

方法2：使用addEventListener绑定事件（推荐） #

这是现代JS更推荐的事件绑定方式，支持给同一元素绑定多个同类型事件：

for (let i=0; i<7; i++) {
    const lineBreak = document.createElement('br');
    document.body.appendChild(lineBreak);

    for (let j=0; j<7; j++) {
        const img = new Image();
        img.src = "immagini/c0.png";
        img.id = `i${j+1 + i*7}`;
        img.addEventListener('mouseover', function() {
            freccia(j);
        });
        document.body.appendChild(img);
    }
}

额外优化建议 #

• 用let/const声明变量，避免全局变量污染（原代码中i、j、img均为全局变量，易引发冲突）
• 使用模板字符串替代字符串拼接，提升代码可读性

内容的提问来源于stack exchange，提问作者MATTHIAS MOLING