Нанести на EventListener не работает

Question

I'am пытаются использовать некоторые значения из «верхнего» функции в «внутренней» функции:

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 
    }); 

Приведенный выше пример не работает, он говорит test не определено.

Но следующие работы:

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

В чем разница? Как я могу заставить его работать правильно?

Answer 1

test это свойство на элементе в этой точке, так что вы должны ссылаться на него так:

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

You can test it here. Разница в том, что в первом примере this относится к элементу id="panel", и свойство там установлено. Во втором примере this относится к глобальному объекту или window, поэтому test - это глобальная переменная, которая работает при доступе к ней.

Answer 2

В вашем втором примере, когда вы звоните A(), this относится к window объекта, поскольку это сфера, в которой A() работает. Все глобальные переменные также относятся к объекту window, поэтому в этом контексте test, this.test и window.test являются одинаковыми объектами.

В первом примере, однако, this относится к элементу, на котором был вызван обработчик, так this.test (который определен) такой же, как "#panel".test, но отличается от test и window.test (которые не определены).

Answer 3

Вы должны принять ответ Ник Craver, я буду просто разъяснение здесь с большим количеством некоторым кодом:

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);