title: addEventListener to ALL INPUT elements when DOM changes
body: <p>At the moment I'm doing the following when the document is complete.</p>
  
  <pre><code>var passwordInputs = document.querySelectorAll("input[type=password]");
  
  for (index = 0; index &lt; passwordInputs.length; ++index) {
      passwordInputs[index].addEventListener("focusin", activeWordsFocusIn);
      passwordInputs[index].addEventListener("focusout", activeWordsFocusOut);
  }
  </code></pre>
  
  <p>Which works as expected. However if the page has some additional script which modifies the DOM and adds more <code>input</code> elements then they are not hooked.</p>
  
  <p>How can add event handlers for ALL <code>input</code> elements, even those added to the DOM thru script/ajax?</p>
  
  <p><strong>Not a duplicate</strong> I don't consider this a duplicate as this question <a href="https://stackoverflow.com/questions/3219758/detect-changes-in-the-dom">Detect Changes in the DOM</a> which focuses on detecting changes in the DOM. My questions focus is on adding an <code>eventListener</code> to all <code>input</code> elements even when the DOM changes. I have since added my own answer to this now.</p>