W jaki sposób i co this.innerHTML przypisuje do zmiennej

Witam wszystkich,
mam mały kłopot ze zrozumieniem fragmentu kodu kalkulatora:

var keys = document.querySelectorAll('#calculator span');
...
keys[i].onclick = function(e) {
        var btnVal = this.innerHTML;

Na jakiej zasadzie do btnVal są przypisywane znaki? Nie rozumiem kompletnie this.innerHTML. Czytałem o obydwu i o ile innerHTML jeszcze do mnie przemawia to this kompletnie, na jakiej zasadzie w tym wypadku to działa?

1. Zamiast onclick lepiej używać addEventListener, ale to już tak na marginesie.

2. Co do this, to jak sama nazwa wskazuje jest to "to" po angielsku, czyli kontekst wywołania. W przypadku funkcji do obsługi zdarzeń będzie to element, który nasłuchuje zdarzenia (tutaj będzie to jakiś tam element span w kontenerze o id=calculator).

this.innerHTML to w tym przypadku keys[i].innerHTML.
zobacz sobie tutaj: https://jsfiddle.net/or60pdr8/