如何将点击事件处理程序添加到从 javascript 创建的 userChat 类

Question

我用 javascript 创建了一个名为 userChat 的类，我希望能够向 userChat 类添加一个单击事件处理程序，以便当我单击 userChat 时它会向我发送我正在单击的用户的名称，问题是我添加了一个 addEventListener 但它不起作用，我不知道我做错了什么，你能帮助我吗，非常感谢。    function updateUsers(socket){       socket.on('updateUsers',function(data){               let usuarios = document.querySelector('#usuarios');        usuarios.innerHTML='';        for(let i = 0; i < data.users.length; i++){            let us = `<div class ="userChat">` +data.users[i] +`</div>`;            usuarios.innerHTML += us;                        let userchat = document.querySelector('.userChat');            userchat.addEventListener('click',function(){            console.log('estas tocando al usuario: '+data.users[i]);            });        }           });    }

Answer 1

您正在尝试将事件侦听器添加到刚刚在 js 中创建的元素（let us = ...在本例中）。您应该将此侦听器添加到已在 DOM 中的该元素的父级，然后您可以检查此点击是否由您的元素触发。换句话说，您需要将此事件“委托”给父元素（事件委托）。例如：

 <parent-element>.addEventListener('click', function (e) {

   if (e.target && e.target.classList.contains('userChat')) {

     //do something

   }

 });

Answer 2

试试这个方法

let us = `<div class ="userChat" onclick='getUser(data.users[0])'>` +data.users[i] +`</div>`;

function getUser(user){

  // user

}