如何将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>```