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

Posted 2023-02-16

【中文标题】如何将单击事件处理程序添加到从 javascript 创建的 userChat 类

【英文标题】：how to add a click event handler to my userChat class created from javascript

【发布时间】：2020-11-03 14:55:27

【问题描述】：

我用 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]);
            );
               
    );
    

【问题讨论】：

你能在这里详细说明“不工作”吗——你会收到错误吗？

您需要使用事件委托。这个问题之前已经回答过了。例如，这里：***.com/questions/34896106/…

如果它不适合你，那一定是因为它包含了socket.io并表达了自己。当我从 javascript 创建一个 html 标记时，我需要它，在这种情况下，我的 userChat 类必须添加一个单击事件处理程序，但我的不起作用，我不知道该怎么做

【参考方案1】：

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

 <parent-element>.addEventListener('click', function (e) 
   if (e.target && e.target.classList.contains('userChat')) 
     //do something
   
 );

【讨论】：

在这种情况下，是否允许用户使用

usuarios.addEventListener('click', function (e) if (e.target && e.target.classList.contains('userChat')) //做点什么 );

"usuarios" 也在 JS 中在你的函数开始时创建，所以它也不起作用。您应该找到一个已经在 DOM 中的元素！也许是“usuarios”的父元素。

【参考方案2】：

试试这个方法

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


function getUser(user)
  // user

【讨论】：

这会弹出聊天：1 Uncaught ReferenceError: getUser is not defined at HTMLDivElement.onclick (chat:1)