title: Binding multiple events (resize and load) to addEventListener (JQuery)
body: <p>Was googling around, but could not find a proper answer to my question. There are some solutions online that would be helpful only the thing is that I need to change my entire code structure and that is not what I want precisely.   </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener('DOMContentLoaded', function(event) {
      if(window.matchMedia("(min-width: 767px)").matches){
         Array.prototype.slice.call(document.getElementsByClassName("tabcontent")).forEach(function(element, index) {
         element.addEventListener("mouseleave", function(event) {
          event.target.style.display = "none";
         });
         document.getElementById("categories-list-box").addEventListener("mouseleave", function(event) {
         if (event.relatedTarget.className.indexOf("tabcontent") == -1) {
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i &lt; tabcontent.length; i++) { 
      tabcontent[i].style.display = "none";
      }
         }
         })
         });
       }
  })</code></pre>
  </div>
  </div>
  </p>