如何将点击事件处理程序添加到从 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 中的该元素的父级，然后您可以检查此点击是否由您的元素触发。换句话说，您需要将此事件“委托”给父元素（事件委托）。例如：&nbsp;<parent-element>.addEventListener('click', function (e) {&nbsp; &nbsp;if (e.target && e.target.classList.contains('userChat')) {&nbsp; &nbsp; &nbsp;//do something&nbsp; &nbsp;}&nbsp;});

Answer 2

试试这个方法let us = `<div class ="userChat" onclick='getUser(data.users[0])'>` +data.users[i] +`</div>`;function getUser(user){&nbsp; // user}