Prośba o wyjaśnienie kodu JS

Question

Witam
Natknąłem się na pewnej stronie na tutorial odnośnie eventów w JS, jednak nie do końca rozumiem działanie kodu. Przedstawiam go poniżej:
 

<div>
    <input type="button" value="Wpierw podepnij zdarzenie!" id="buttonTest" />
    <input type="button" value="Podepnij zdarzenie" id="buttonTestAdd" />
    <input type="button" value="Odepnij zdanierze" id="buttonTestRemove" />
</div>

 

var buttonTest = document.getElementById('buttonTest');
    buttonTest.tekst = 'To jest jakis tekst do wypisania';

var buttonAdd =  document.getElementById('buttonTestAdd');
var buttonRemove =  document.getElementById('buttonTestRemove');

function showText() {
    alert(this.tekst);
}

function addTestEvent() {
    buttonTest.value = 'No dobra. Można klikać!';
    buttonTest.addEventListener('click', showText);
}

function removeTestEvent() {
    buttonTest.value = 'Wpierw podepnij zdarzenie!';
    buttonTest.removeEventListener('click', showText);
}

document.addEventListener("DOMContentLoaded", function() {
    buttonAdd.addEventListener('click', addTestEvent, false);
    buttonRemove.addEventListener('click', showText);
});

 
Część rozumiem, jednak nie wszystko, np skąd wzięła się metoda text w drugiej lini JS: 

 

  buttonTest.tekst = 'To jest jakis tekst do wypisania';

Nie wiem też skąd wzięło się 'click' w eventach ani nie rozumiem działania ostatniej funckcji. Proszę o tak zwane łopatologiczne tłumaczenie, gdyż ciężko mi przebrnąć ostatnimi czasy przez JSa :(

Answer 1

HTML jest chyba jasny więc odpuszczam. W JS definiujesz trzy zmienne: buttonTest, buttonAdd i buttonRemove, które odpowiadają poszczególnym elementom o id: buttonTest, buttonTestAdd, buttonTestRemove. Deklarujesz też funkcję showText, która rzuca alert równy polu "tekst" obiektu, który jest traktowany jako this. W wypadku, kiedy podpinasz event metodą addEventListener uruchamiasz funkcję, ustawiając jej jako parametr this element, któremu podpinasz owe zdarzenie. W funkcjach addTestEvent/removeTestEvent po kliknięciu buttonów Podepnij/Odepnij zdarzenie po prostu dodajesz lub usuwasz obsługę zdarzenia z przycisku pierwszego (tak przynajmniej być powinno, IMO linia 23 powinna podpinać zdarzenie removeTestEvent ;)). Zdarzenie DOMContentLoaded jest wywoływane wówczas, kiedy to cała zawartość dokumentu zostanie załadowana. Jeśli skrypt wstawisz przed deklaracją wszystkich trzech buttonów, to deklarując zmienne buttonTest/buttonAdd/buttonRemove nie będą zawierały odpowiednich elementów, ponieważ... nie zostały jeszcze załadowane. Co do buttonText.text (gwoli ścisłości pole, nie metoda) to po prostu przypisywanie nowej wartości do obiektu, nie mam natomiast pojęcia, czy jest to zgodne ze standardami.

Comments

takich postów więcej :D