Простого этот контекст Пример изменения в Javascript

Question

Я новичок в JS, и читал много о поведении причуды изменения содержимого this, поэтому я сделал простой пример:

HTML

<button>button1</button> 

JavaScript

var button1, getText 

button1 = document.getElementsByTagName('button')[0] 

getText = function(){alert(this.textContent)} 

button1.addEventListener('click', getText) 

http://jsfiddle.net/e95ME/

Но я не вижу контекста this изменен, так как код работает. Любой может изменить этот код или дать еще один простой пример, чтобы показать поведение quirk изменения содержимого this?

Answer 1

Когда кнопка нажата, прослушиватель событий установит this самому элементу DOM.

Это как если ваша функция вызывается так:

getText.call(<button-element>, <event>) 

Answer 2

var button1, getText 

button1 = document.getElementsByTagName('button')[0] 

getText = function(){alert(this.textContent)} // called in context of `button1` 

button1.addEventListener('click', getText) 

getText(); // called in context of `window` 

Когда окно нагрузки, он будет говорить undefined, потому что нет никакой собственности window.textContent. Когда вы нажимаете кнопку, она должна указывать button1, потому что она вызывается в контексте кнопки.

Answer 3

ли вы имеете в виду это?

var button1, getText 

button1 = document.getElementsByTagName('button')[0] 

getText = function() { 
    this.textContent = "changed content"; 
} 

button1.addEventListener('click', getText)