title: How do I get same result using addEventListener (keyup) instead of onkeyup attribute in the HTML?
body: <p>I want to restrict an input text through a regular expression. In the first example I use the attribute <code>onkeyup = &quot;lettersOnly(this)&quot;</code> inside the HTML, as follows:</p>
  <pre><code>&lt;form&gt;
  &lt;label for=&quot;username&quot;&gt;Choose a Username:&lt;/label&gt;
  &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; onkeyup=&quot;lettersOnly(this)&quot;&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
  function lettersOnly(input){
              var regex = /[^a-z]/gi;
              input.value = input.value.replace(regex, &quot;&quot;);
          }
  &lt;/script&gt;
  </code></pre>
  <p>It works but I learnt that this is a <strong>bad practice</strong>. I found other solution avoiding that, and setting <code>someVariable.onkeyup</code> inside <code>&lt;script&gt;</code> tags. However, <strong>my goal</strong> is to find another way to get the same result using <code>addEventListener ('keyup', lettersOnly, false)</code>. I researched a lot for this specific situation but no answers. Is it possible? I tried the following:</p>
  <pre><code>&lt;form&gt;
  &lt;label for=&quot;username&quot;&gt;Choose a Username:&lt;/label&gt;
  &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot;&gt;
  &lt;!--No more “onkeyup” attribute.--&gt;
  &lt;/form&gt;   
  
  &lt;script&gt;
  function lettersOnly(input){
          var regex = /[^a-z]/gi;
          input.value.addEventListener('keyup', lettersOnly(input){
          input.value = input.value.replace(regex, &quot;&quot;);
            }, false)
          }
  &lt;/script&gt;
  </code></pre>
  <p>Doesn‘t work. My intention is to avoid the event handler in the html and use instead, the addEventListener. What is wrong in this last coding? Why doesn‘t work? I‘ll really appreciate your patience.</p>