多个事件监听器

Question

OK so i have the following questions:

Should i add an event listener directly to the parent element (modal popup box), where this element have 3 buttons (2 for closing the tab, 1 for submitting data).

And in the listener function to assign some class methods like so and manipulate the whole functionality (submit data and display UI):

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

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

Or should i add 2 click listeners to the parent element one for closing the modal and one for submitting the data.

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

Or one listener directly to the parent element to manipulate the UI and another listener for the button that's inside the container.

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

Answer 1

Okay, and what about only 1 event listener for All ?

 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

If you bind 2 click event handlers to the parent element only the last one will fire, meaning you will need to do additional checking in the function definition as to what you actually clicked.

ie

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

so depending on the complexity of what you actually want, binding the event handler functions to the specific element may be less messy