Event Reference in Function
<p>If I have a object, with a function that captures every form on the page as an array:</p>

<pre><code>var object = 
{
 var forms = document.getElementsByTagName("form");
</code></pre>

<p>And I add an event listener to it (W3C DOM 2 Event Model, I don't care about IE for this example):</p>

<pre><code>addEventListener = function(target, type, listener)
{
 target.addEventListener(type, listener, false);
};
</code></pre>

<p>And I call (normally a loop, but lets just take one example):</p>

<pre><code>addEventListener(forms[i], "change", changeListener);
</code></pre>

<p>And changeListener is equal to:</p>

<pre><code>changeListener: function(event)
{
 updateDependents(this);
}
</code></pre>

<p>And updateDependents equals: </p>

<pre><code>updateDependents: function(form)
   {
    ...
   }
};
</code></pre>

<p>can someone explain to me the progression of arguments (i.e. what "this" and "event" are equal to)?</p>

<p>To me, it looks like:</p>

<p>For the form in question (forms[i]), an event listener is being added based upon a "change" event, and the action to be taken is "changeListener".</p>

<p>changeListener takes an argument of (event), so it must be referencing potential event that forms[i] has(?). [not sure about this]</p>

<p>It then calls "updateDependents(this)"... what is the "this" here? Is it the form that is identified in the "target" argument of the "addEventListener" method, or is it the event argument that exists within the "changeListener(event)" method? [can someone please explain why it would be one over the other?] </p>

<p>Note: I'm obviously confused, so I apologize for any stupidity. Also, this is an excerpt from "Simply Javascript" by Sitepoint.</p>

<p>Cheers,</p>

<p>Sapiensgladio</p>
