JavaScript версия onclick, onmouseover, onmouseout для изображения

Question

Я хотел бы иметь возможность вызывать функции для onmouseover, onmouseout и onclick изображения, просто используя javascript, а не HTML. У меня есть код, который создает динамический список тегов абзаца c на странице, используя чисто 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