title: two events at the same time in JavaScript, click event handler not executed
body: <p>I have the following event-listeners</p>
  
  <pre><code>element2.addEventListener("focusout", hideDropdown);
  element3.addEventListener("click", addSelectedOption);
  </code></pre>
  
  <p>when I click on <code>element3</code>, only <code>function1</code> is called, but I want both to be called since clicking <code>element3</code> also means that <code>element2</code> lost focus.</p>
  
  <p>When I remove the the first event listener, then the second one works. Why is this the case? and how can I get around it?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;header&gt;
  
  &lt;style&gt;
      #element3 {
          display: none;
      }
  &lt;/style&gt;
  &lt;/header&gt;
  
  &lt;body&gt;
  &lt;label&gt;Multi Select&lt;/label&gt;
  &lt;div id="element1"&gt;
      &lt;p id="element2" contenteditable="true"&gt;Select required competencies&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="element3" class="auto-complete-select-dropdown"&gt;
      &lt;p&gt;One&lt;/p&gt;
      &lt;p&gt;Two&lt;/p&gt;
      &lt;p&gt;Three&lt;/p&gt;
      &lt;p&gt;Four&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
      var element1 = document.getElementById("element1");
      var element2 = document.getElementById("element2");
      var element3 = document.getElementById("element3");
  
      element2.addEventListener("keyup", showDropdown);
      element2.addEventListener("focusout", hideDropdown);
      element3.addEventListener("click", addSelectedOption);
  
      function showDropdown() {
          var element = document.getElementById("element3");
          if (element.style.display != "block")
              element.style.display = "block";
      }
  
      function hideDropdown() {
          var element = document.getElementById("element3");
          if (element.style.display != "none")
              element.style.display = "none";
      }
  
  
      function addSelectedOption(event) {
          alert("here");
          element = event.target;
          var element1 = document.getElementById("element1");
          var p = document.createElement('p');
          p.textContent = element.textContent.trim();
      }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>