多个事件监听器

Question

好的，所以我有以下问题：

我是否应该直接向 parent element（模态弹出框）添加一个事件侦听器，其中此元素具有 3 buttons（2 个用于关闭选项卡，1 个用于提交数据）。

并在 listener function 中分配一些 class methods 并操纵整个功能（提交数据并显示 UI）：

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

function modal(e) {
  ui.closeModal(e);
  weather.submitData();
  e.stopPropagation();
}

或者我应该向父元素添加 2 个 click listeners，一个用于关闭模式，一个用于提交数据。

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

或者一个监听器直接监听 parent element 以操纵 UI，另一个监听器监听容器内的按钮。

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

Answer 1

好的，如果只有 1 个事件侦听器呢？

const MyDialog = document.querySelector('#weather-modal-container')

MyDialog.onclick=e=>{
  let role = e.target.dataset.role
  if (role)
  {
    e.preventDefault()

    console.clear()
    console.log (role)
    
    switch (role){
      case 'submitData':
        console.log ('something is :', MyDialog.something.value)
        // stuff about submiting data
        break;
      case 'closeModal':
        // stuff about close modal
        break;
    }
  }
}

#weather-modal-container { display: block; width: 30em; padding: 1em; border: 1px solid grey;}
a[data-role] { color: red; float: right;}

#weather-modal-container button { float: right; margin: 0 .3em 0 0 }

<form id="weather-modal-container">
  <a href="#" title="closeModal" data-role="closeModal">X</a>

  <p>Bla bla bla bla</p>
  <input type="text" placeholder="with something" name="something" value="hello">

  <a href="https://en.wikipedia.org" title="wikipedia" > wikipedia</a>
  <br>
  <button data-role="submitData">Send</button>
  <button data-role="closeModal">Cancel</button>
</form>

多个事件监听器

Multiple event listeners

javascript

click

listener

display