addEventListener("click", function(event) {...}); Jakie właściwości ma event?

0

Dzień dobry.

Poszukuję listy właściwości argumentu event listenera click. Proszę link albo podpowiedź. Chodzi mi o właściwość, w której będzie dostęp do zawartości klikanego obiektu.

document.getElementById("jakies_id").addEventListener("click", function(event)
    {
        event.innerHTML = "nowa zawartosc"; //to nie działa
    });

Odpowiednik innerHTML, bo ten nie działa.

Dzięki
M.

3

Już znalazłem:

https://developer.mozilla.org/pl/docs/Web/API/Event/target

event.target.innerHTML ...
4

Tak, tylko uważaj z event.target. Przykład:

<div id="jakies_id">
    Ale to jest <strong>fajne</strong>
</div>

Jak klikniesz na "Ale to jest", to efekt będzie taki, jaki miał być. Ale jak klikniesz na fajne, otrzymasz:

Ale to jest **nowa zawartosc **

Nie o to chodziło, prawda? Dzieje się tak dlatego, że event.target wskazuje na element, który wywołał zdarzenie. Jeśli klikniesz na <strong>, wtedy event.target wskazuje właśnie na <strong>. Zamiast tego użyj event.currentTarget lub po prostu this:

document.getElementById("jakies_id").addEventListener("click", function (event) {
    event.currentTarget.innerHTML = "nowa zawartosc";
});

document.getElementById("jakies_id").addEventListener("click", function () { // już nawet nie musisz używać event
    this.innerHTML = "nowa zawartosc";
});

Dlaczego działa prosty this? Dlatego, że funkcje przekazane do listenera są bindowane w taki sposób, żeby zarówno this, jak i event.currentTarget wskazywały na element, na którym wywołujesz addEventListener(). Innymi słowy, this === event.currentTarget to true.

Niestety ubolewam trochę nad nazewnictwem, bo target i currentTarget to mylące nazwy i przez to większość ludzi nawet nie wie, że używanie target często prowadzi do błędów.

1 użytkowników online, w tym zalogowanych: 0, gości: 1