title: JQuery: How to get the element in a class selector based function
body: <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>$("#x1").focus();
  $('#x1').get(0).focus();
  
  $('.inputTextBox').focus(function() {
    //This is where I need help... how to get the
    //element of the element that is getting focus?
    var myElement = document.getElementById('x1');
    myElement.style.backgroundColor = "#A7C942";
    myElement.style.color = "black";
    myElement.style.fontSize = "2em";
  });
  
  $('inputTextBox').blur(function() {
    //This is where I need help... how to get the
    //element of the element that is losing focus?
    var myElement = document.getElementById('x1');
    myElement.style.backgroundColor = "gray";
    myElement.style.color = "black";
    myElement.style.fontSize = "2em";
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.inputTextBox {
    background: gray;
    background-color: gray;
    color: black;
    font-size: 2em
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
    &lt;div data-role="content"&gt;
      &lt;fieldset&gt;
        &lt;label&gt;x1&lt;/label&gt;
        &lt;input id="x1" , autofocus="autofocus" , class="inputTextBox" /&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
        &lt;label&gt;x2&lt;/label&gt;
        &lt;input id="x2" , class="inputTextBox" /&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
        &lt;label&gt;x3&lt;/label&gt;
        &lt;input id="x3" , class="inputTextBox" /&gt;
      &lt;/fieldset&gt;
      &lt;input type="submit" value="Log in" style="width:100%" /&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The input boxes and the <code>Ids</code> will be generated automatically so I need to figure out how to get the element that is firing the <code>focus</code> and <code>blur</code> events. </p>
  
  <p>Can I pass these somehow?  Or can I get from the DOM?</p>
  
  <p><strong>NOTE:</strong> I have tried to use the Onfocus and the onblur inside the input tag, but this only works for chrome. I can't get this to work for IE.</p>
  
  <p>Second question:  Is there any way to tab JUST over the control elements?   When I tab past the button I would like to loop back to the first textbox, but instead I hit other elements in the header first.</p>