用于图像的 onclick、onmouseover、onmouseout 的 JavaScript 版本

Question

我希望能够调用图像的 onmouseover、onmouseout 和 onclick 函数，纯粹使用 javascript，而不是 HTML。我有代码可以使用纯 javascript 在页面上创建一个动态的段落标签列表。它看起来像一个列表，但不是一个列表。我还在列表的每一行的左侧添加了一个 x 图像。我想在单击该图像时调用一个函数来删除该行。请记住，图像是通过 JavaScript 而不是 HTML 添加的。我该怎么做？

这是我的代码：

updateAllDataDisplay(false);
function updateAllDataDisplay(addOne) {

    // Updating the entire display
    if (!addOne) {
        for (var i = 0; i < allData.length; i++) {
            let a = document.createElement("p");
            let c = document.createElement("img");
            c.src = "delete_button_smallest_still.png";
            c.addEventListener('click', removeLine(`${allData[i].month}/${allData[i].day}/${allData[i].year} (${allData[i].hours}:${allData[i].mins}:${allData[i].secs}): ${allData[i].exerciseHours}. ${allData[i].food}. ${allData[i].weight}. ${allData[i].mood}.`), false);
            a.appendChild(c);
            let d = document.createTextNode(" ");
            a.appendChild(d);
            let b = document.createTextNode(`${allData[i].month}/${allData[i].day}/${allData[i].year} (${allData[i].hours}:${allData[i].mins}:${allData[i].secs}): ${allData[i].exerciseHours}. ${allData[i].food}. ${allData[i].weight}. ${allData[i].mood}.`);
            a.appendChild(b);    
            document.body.appendChild(a); 
        }

    // Updating the last item of the display
    } else if (addOne) {
        let a = document.createElement("p");
        if (allData.length > 0) {
        let b = document.createTextNode(`${allData[allData.length - 1].month}/${allData[allData.length - 1].day}/${allData[allData.length - 1].year} (${allData[allData.length - 1].hours}:${allData[allData.length - 1].mins}:${allData[allData.length - 1].secs}): ${allData[allData.length - 1].exerciseHours}. ${allData[allData.length - 1].food}. ${allData[allData.length - 1].weight}. ${allData[allData.length - 1].mood}.`);
        a.appendChild(b);
        document.body.appendChild(a);
        }
    }
}

Answer 1

使用addEventListener

在此处查看文档：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener