Javascript 多事件侦听器

好的，我有以下问题：

我是否应该将事件侦听器直接添加到

父元素（模式弹出框），其中该元素有
3个按钮（2个用于关闭选项卡，1个用于提交数据）

在
侦听器函数中
分配一些
类方法
，例如，并操作整个功能（提交数据和显示UI）：

或者我应该向父元素添加2个
单击侦听器
，一个用于关闭模态，另一个用于提交数据

document.getElementById('weather-modal-container').addEventListener('click', closeModal);
document.getElementById('weather-modal-container').addEventListener('click', submitData);

或者一个监听器直接连接到
父元素
来操作
UI
，另一个监听器则连接到容器中的按钮

document.getElementById('weather-modal-container').addEventListener('click', closeModal);
document.getElementById('button-inside-container').addEventListener('click', submitData);

如果将2个click事件处理程序绑定到父元素，则只会触发最后一个，这意味着您需要在函数定义中对实际单击的内容进行额外检查

i、 e

因此，根据您实际需要的复杂性，将事件处理程序函数绑定到特定元素可能不会太麻烦，好的，那么只为所有元素绑定一个事件侦听器怎么样


const MyDialog=document.querySelector（“#天气模式容器”）
MyDialog.onclick=e=>{
让role=e.target.dataset.role
如果（角色）
{
e、 预防默认值（）
控制台清除（）
console.log（角色）
交换机（角色）{
案例“提交数据”：
console.log（'something is:'，MyDialog.something.value）
//关于提交数据的东西
打破
案例“closeModal”：
//关于关闭模式的东西
打破
}
}
}
#天气模式容器{显示：块；宽度：30em；填充：1em；边框：1px纯灰；}
[数据角色]{color:red；float:right；}
#天气模式容器按钮{float:右侧；边距：0.3em0}

呜呜呜呜呜呜



发送
取消
请对每个问题问一个问题……因此
数据-
属性比使用
e.target.className/id==something{do something}
更好；没有绝对的真理，在任何情况下，计算机科学都不是一种宗教。最好的代码是最容易理解、尽可能简洁的代码。对我来说，增加事件处理程序是一种异端邪说，尤其是在这种情况下，因为HTML5.2版本将很快引入标记Ok先生，您的示例是一种好的、可以理解的方法。我会用那个箱子。比为关闭按钮设置一个
类
，为
提交按钮设置一个
id
更容易
document.getElementById('weather-modal-container').addEventListener('click', closeModal);
document.getElementById('button-inside-container').addEventListener('click', submitData);

if(event.target.id == 'button-inside-container') {
    // do something
}