title: Struggling to add a blur event listener
body: <p>I have a searchbox on the site I work on and would like to track the search terms folk are looking for.</p>
  
  <p>Since the searchbox auto guesses what someone is typing and searches for it, there is no click event.</p>
  
  <p>In the console the textContent that I want when the blur happens is the .textContent of this:</p>
  
  <pre><code>myVar = document.querySelectorAll('.twitter-typeahead &gt; span')[2]
  </code></pre>
  
  <p>But the value returned here is only not null when someone has actually typed something. So attaching a blur event seems the way to go. On the back of someones help on another forum I got this far in the console:</p>
  
  <pre><code>myVar.addEventListener('blur', function(){dataLayer.push({'event':'bla'})})
  </code></pre>
  
  <p>After typing this all in the console I don't see any values being pushed to the dataLayer which makes me think that the blur event is not working (as opposed to the dataLayer.push function.)</p>
  
  <p>The page with the searchbox in question is <a href="https://www.nextissue.ca/newsstand/" rel="noreferrer">here</a>.</p>
  
  <p>How would I attach a blur event to someone unfocussing the search box?</p>