title: Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#' is not a valid selector
body: <p>I am using this great vanilla JavaScript version of the jQuery <code>on()</code> created by <a href="https://gomakethings.com/a-vanilla-javascript-equivalent-of-jquerys-on-method/" rel="nofollow noreferrer">ChrisFerdinandi</a></p>
  
  <pre><code>var on = function (event, elem, callback, capture) {
          if (typeof elem === 'function') {
              capture = callback;
              callback = elem;
              elem = window;
          }
          capture = capture ? true : false;
          elem = typeof elem === 'string' ? document.querySelector(elem) : elem;
          if (!elem) return;
          elem.addEventListener(event, callback, capture);
      };
  </code></pre>
  
  <p>And I'm hitting an error at this line:</p>
  
  <pre><code>elem = typeof elem === 'string' ? document.querySelector(elem);
  </code></pre>
  
  <p>When I utilize the function here:</p>
  
  <pre><code>on('mouseover', '#' + rollOverCollectionA[i].id, function () {
  </code></pre>
  
  <p>and here:</p>
  
  <pre><code>on('mouseout', '#' + rollOverCollectionA[i].id, function () {
  </code></pre>
  
  <p>Looks like I need a third option, but not sure how to start...</p>
  
  <p>or should I just utilize <code>==</code> like Kyle Simpson would suggest instead?</p>
  
  <pre><code>elem = typeof elem === 'string' ? document.querySelector(elem) : elem;
  </code></pre>