EventListener i onkeydown - jak połączyć aby działało?

pytanie zadane 10 grudnia 2019 w JavaScript przez jupikajej Początkujący (440 p.)
zamknięte 10 grudnia 2019 przez jupikajej

document.querySelector("body").addEventListener('onkeydown', klik (event));
...
...
...
function klik (event)
{
    console.log(event.key);
}

Dlaczego gdy klikam klawisz to w konsoli nie pojawia się jaki to klawisz? Jest tylko undefined.

<body onkeydown="klik(event)">
...
...
...
function klik (event)
{
    console.log(event.key);
}

Zaś w tym przypadku wszystko działa dobrze.

Nakieruje ktoś co robię źle w pierwszym przykładzie?

komentarz zamknięcia: ROZWIAZANE

2 odpowiedzi

odpowiedź 10 grudnia 2019 przez Comandeer Guru (601,110 p.)
wybrane 10 grudnia 2019 przez jupikajej

Najlepsza

Nazwy zdarzeń nie zawierają w sobie przedrostka on. Używa się go tylko w przypadku atrybutów w znacznikach HTML, do oznaczenia, że dany atrybut zawiera obsługę danego zdarzenia. Stąd należy użyć keydown.

Natomiast addEventListener wymaga też, by przekazywać mu funkcję. Funkcją jest klik – a więc wystarczy podać samą nazwę. Jeśli podamy klik( event ), to tak naprawdę od razu wywołamy funkcję klik i to, co ona zwróci, zostanie przypisane jako listener do zdarzenia keydown. W przypadku atrybutu [onkeydown] taki kod działa, ponieważ jest on tak naprawdę traktowany jako wnętrze funkcji, czyli mniej więcej coś takiego w JS:

function( event ) {
    klik( event );
}

I taką też konstrukcję trzeba użyć w addEventListener, względnie jej skróconą wersję:

document.body.addEventListener( 'keydown', function( event ) {
    klik( event );
} );

// lub

document.body.addEventListener( 'keydown', klik );

odpowiedź 10 grudnia 2019 przez Michałełe Nałogowiec (25,600 p.)

Witam, zmień na

document.querySelector("body").addEventListener('keydown', klik);

komentarz 10 grudnia 2019 przez jupikajej Początkujący (440 p.)

Dzięki wielkie, działa. Mógłbyś wytłumaczyć dlaczego ma być samo keydown i tylko nazwa funkcji? I dlaczego w body działa tak jak jest?

komentarz 10 grudnia 2019 przez jupikajej Początkujący (440 p.)

I dlaczego gdy w body dam tak jak w EventListenerze to przestaje działać wtedy body?

komentarz 10 grudnia 2019 przez Michałełe Nałogowiec (25,600 p.)

Przed event'em dajemy 'on' tylko gdy dodajemy to w HTML.

Jako argument dajemy tylko nazwę funkcji - liczy się tylko to co funkcja która daliśmy przyjmuje ( de facto to nie musi ona przyjmować argumentu, też będzie działać).

Możesz też skorzystać z funkcji strzałkowej

document.querySelector("body").addEventListener('onkeydown', ( event) => {
    // ...
});

A nie dawać funkcję jako argument.

Podobne pytania

0 głosów

1 odpowiedź 509 wizyt

hiperlinki w javascript na buttonach przy użyciu addEventListener click event

pytanie zadane 10 maja 2023 w JavaScript przez Programator6909 Użytkownik (780 p.)

0 głosów

1 odpowiedź 103 wizyt

React dodawanie clasy

pytanie zadane 8 czerwca 2020 w JavaScript przez rob Bywalec (2,440 p.)

0 głosów

0 odpowiedzi 137 wizyt

wywołanie funkcji w innej funkcji poza eventListener

pytanie zadane 6 lipca 2021 w JavaScript przez Dawid89 Obywatel (1,120 p.)

EventListener i onkeydown - jak połączyć aby działało?

Zaloguj lub zarejestruj się, aby skomentować.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci