如何將 EventListener 添加到特定節點？ 回答

Question

我正在嘗試在網站上制作文件瀏覽器。 首先，我正在創建一個 XMLHttpRequest 來獲取當前庫中的所有文件並將其添加到 HTML 中。 問題是當我想在 HTML 中的所有節點上放置一個事件偵聽器時，他不能，因為 XML 請求總是在我想放置事件偵聽器的那一刻之后完成...

$(window).on("load", function() {
    //prépare ajax
    let ajax = new XMLHttpRequest();
    let methode = "GET";
    let url = "php/getFile.php"
    let asynchronous = true;
    ajax.open(methode, url, asynchronous);

    ajax.send();
    let data;
    ajax.onreadystatechange = function() {

        if (this.readyState == 4 && this.status == 200) {
            let data = JSON.parse(this.responseText);
            let files = ` <ul data-role="listview" data-view="list" data-select-node="true">
            <ListView ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollMode="Enabled" >`;
            for (let i = 0; i < data.length; i++) {
                let file = data[i];
                let nom = file['file'];
                let ext = "." + file['ext'];
                let nudeExt = file['ext'];

            files += `<li id="test" data-icon="<span class='mif-document-file-${nudeExt.toLowerCase()}'>" data-caption="${nom}"></li>`
                

            }
            files += `   </ul>`;
            document.querySelector("#files").innerHTML = files;
            
// I try to put the event listener here but it doesn't work,  

            document.querySelector("#test").addEventListener("onclick", test());
        }

    }


})

function test() {
    let test = document.querySelector('#test');
    console.log(test)
}

回答

在添加這樣的事件偵聽器的地方：

document.querySelector("#test").addEventListener("onclick", test());

我直接在節點中添加了這樣的事件：

files += ` <li ondblclick="test()" class="folder" type="folder" data-icon="<span class='mif-folder'>" data-caption="${nom}"></li>

Answer 1

回答

在添加這樣的事件偵聽器的地方：

document.querySelector("#test").addEventListener("onclick", test());

我直接在節點中添加了這樣的事件：

 files += `    <li  ondblclick="test()" class="folder" type="folder" data-icon="<span class='mif-folder'>" data-caption="${nom}"></li>```