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

好吧，那么对于All来说只有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>

Answer 2

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

即

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

因此，根据您实际想要的复杂性，将事件处理程序功能绑定到特定元素可能会少一些麻烦

多个事件监听器

2 个答案: