Apply on an eventListener doesn't work

Question

I'am trying to use some values from the "upper" function in the "inner" function:

function Load(el, script)
{
    el.addEventListener('click',
        function (e)
        {
            this.test = "testing";
            script.apply(this, arguments);
        }, false);
};

Load(document.getElementById("panel"),
    function (e)
    {
        alert(test); // test is undefined
    });

The above example doesn't work, it says test is undefined.

But the following works:

function A(B)
{
  this.test = "bla";
  B.apply(this);
}
function B()
{
  alert(test);
}
A(B);

What's the difference? How can I make it work properly?

Answer 1

test is a property on the element at that point, so you need to reference it like that:

Load(document.getElementById("panel"),
function (e)
{
    alert(this.test); // "testing"
});

You can test it here. The difference is that in the first example this refers to the id="panel" element and the property is set there. In the second example this refers to the global object, or window, so test is a global variable that works when you go to access it.

Answer 2

In your second example, when you call A(), this refers to the window object since that's the scope in which A() runs. All global variables also belong to the window object, so in that context, test, this.test and window.test are all the same entity.

In the first example, however, this refers to the element on which the handler was called, so this.test (which is defined) is the same as "#panel".test but is different from test and window.test (which are not defined).

Answer 3

You should accept Nick Craver's answer, I'm just clarifying here with some more code:

function Load(el, script)
{
    el.addEventListener('click',
        function (e)
        {
            this.test = "testing";  // sets el.test="testing" ('cos this==el)
            script.apply(this, arguments);
        }, false);
};

Load(document.getElementById("panel"),
    function (e)
    {
        alert(test); // alerts window.test, not el.test
    });

function A(B)
{
  this.test = "bla"; // sets window.test="bla" ('cos this==window)
  B.apply(this);
}
function B()
{
  alert(test); // alerts window.test
}
A(B);