js 事件委托的注意事项

这是我遇到的一个小问题，在这里记录一下。

问题：我给最外层 class为roomItem的div通过js给它添加了click事件，然后想要获取它上面的roomid。但是每当我点击到里边的元素后，获取到的roomid就是undefined，只有点击外部边缘才能正常获取到roomid。

<div class="roomItem" data-roomid="536283">
        <div class="roomIDBox">
            <div class="idText"><span>房间ID：</span></div>
            <div class="roomID">536283</div>
        </div>
        <div style="height: 1px; background-color: black;"></div>
        <div class="userList">
            <div class="userBox" data-roomid="536283">
                <div class="userTitle"><span>黑方：</span></div>
                <div class="userName"><span>9999</span></div>
            </div>
            <div class="userBox" data-roomid="536283">
                <div class="userTitle"><span>白方：</span></div>
                <div class="userName"><span></span></div>
            </div>
        </div>
    </div>

原因：

经过一系列探索，才发现我使用的是事件委托，点击事件的target将是实际触发事件的元素，而不是绑定事件的元素。这可能导致无法直接获取到期望的元素。

var roomItem = document.createElement('div');
roomItem.classList.add('roomItem');
roomItem.dataset.roomid = roomID
roomItem.addEventListener('click', joinRoom);

解决方案：

1. 不使用事件委托

var roomItem = document.createElement('div');
roomItem.classList.add('roomItem');
roomItem.dataset.roomid = roomID
roomItem.onclick = joinRoom

直接把onclick绑定上去，不要用事件委托

1. 事件委托来处理点击事件

function joinRoom(event){
    // 检查点击的元素是否是最外层div或其内部元素
    var target = event.target.closest('.roomItem');

    if (target) {
        // 在这里处理您的点击事件，可以通过 target 获取相关信息
        var roomID = target.dataset.roomid;
        console.log('点击了房间ID：', roomID);

        // 这里可以添加其他处理逻辑
    }
}

上述代码中，closest('.roomItem') 方法用于找到离点击的元素最近的具有类名为 roomItem 的祖先元素。这样，我们就可以确保点击事件是在我们期望的最外层 div 或其内部元素上触发的。