title: Multiple event listeners
body: <p>OK so i have the following questions:</p>
  
  <p>Should i add an event listener directly to the <code>parent element</code>(modal popup box), where this element have <code>3 buttons</code>(2 for closing the tab, 1 for submitting data).</p>
  
  <p>And in the <code>listener function</code> to assign some <code>class methods</code> like so and manipulate the whole functionality (submit data and display UI):</p>
  
  <pre><code>document.getElementById('weather-modal-container').addEventListener('click', modal);
  
  function modal(e) {
    ui.closeModal(e);
    weather.submitData();
    e.stopPropagation();
  }
  </code></pre>
  
  <p>Or should i add 2 <code>click listeners</code> to the parent element one for closing the modal and one for submitting the data.</p>
  
  <pre><code>document.getElementById('weather-modal-container').addEventListener('click', closeModal);
  document.getElementById('weather-modal-container').addEventListener('click', submitData);
  </code></pre>
  
  <p>Or one listener directly to the <code>parent element</code> to manipulate the <code>UI</code> and another listener for the button that's inside the container.</p>
  
  <pre><code>document.getElementById('weather-modal-container').addEventListener('click', closeModal);
  document.getElementById('button-inside-container').addEventListener('click', submitData);
  </code></pre>