title: Accessing event.data from handler of input on textarea
body: <p>I've been looking arround for a couple of days on this matter.</p>
  
  <p>For some background I will explain the objective:
    I have a textarea and I want that when I type some special character defined by me (like @) it detects it as a part of a dictionary and show an autocomplete floating dive to choose from and if it's not in the dictionary it adds it.</p>
  
  <p>The current status / problem is that I'm trying to capture the changes in the textarea with the input event and it works, it runs the handler code exactly when I want but I'm not able to access the data. </p>
  
  <p>I guess I could capture the paste event and the key up events and take the clipboard from one and the key code from the other but I wonder if there is a way I can do it with the input event.</p>
  
  <p>Here the relevant code:</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>function checkLastCharacter(event){
    console.log(event);
  }
  
  $( document ).ready(function() {
      console.log( "ready!" );
      //$( "#update" ).click(updateClick);
      var text=document.getElementById("text");
      text.addEventListener("input", checkLastCharacter);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;textarea id="text" rows="4" cols="50"&gt;Sample text&lt;/textarea&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Result of execution:</strong> No mater what key I press or if I paste or not anything it shows:</p>
  
  <blockquote>
    <p>"event: undefined"</p>
  </blockquote>
  
  <p>Thanks in advance!</p>