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

Question

I'd like to be able to call functions for onmouseover, onmouseout, and onclick of an image, purely using javascript, not HTML. I have code that creates a dynamic list of paragraph tags on the page using purely javascript. It looks like a list but is not a list. I've also added an x image to the left of each line of the list. I'd like when that image is clicked, to call a function to remove that line. Remember the image was added via JavaScript not HTML. How do I do this?

Here is my code:

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

Use addEventListener

Look at the docs here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener