Események javascript

Miért van szükség eventy egyáltalán? Ha azt akarjuk, hogy végre valamilyen kódot, ha rákattint a Element, vagy ha lebeg felett vagy alatt összpontosít, szükségünk eventy. Vagyis, mi tesz esemény DOM Element és ott lebeg. És vár, és ha megtesszük ezt az eseményt. Például, ha rákattintunk az elemek. Aztán ezt a feladatot.

Hang eventy HTML, hogy ez rossz, és nem rugalmas. Sokkal jobb, hogy egy speciális módszert erre. Ez addEventListener módszer.

Nézzük eltávolítani az onclick attribútumot a gombot, akkor adjunk hozzá egy osztály változása

De most szembesülnek egy kivétellel. Próbáljuk megtalálni a fájlt gombot, és zakonsolit

Most, ha megnézzük a böngésző, a yelement nevelkedett, és mi is vele együtt dolgozni. Nézzük lógni hallgató rákattint a gombra.

Írjunk mi DOM elem változó, és adjunk hozzá addEventListener. Ez a funkció, amely azon a neve az első paraméter Eventa, ebben az esetben egy kattintás, és a második paraméter a funkció, amely végre, amikor kattintson.

Ha megnézzük a böngészőben, ha rákattint a hozott ki minket a console.log.

És így leteheti bármennyi rakodók. Naprime adjunk egy másik hallgató.

Most nézzük írni egy kis példa. Szeretnénk létrehozni 2 darabokból, és ha fölé viszi az első, szeretnénk megjeleníteni egy második yelement.

Adjunk hozzá 2 Elements egy oldalt, és add hozzá osztályok. Második yelement leplezni írásban inline display: none. Persze, jobb lenne írni a stílus egy külön css fájlt, de egy kis példa, és így.

És lógott az első elem 2 események: mouseover és elmozdítja azt. Azaz, az első fog bekövetkezni, ha mozog a Element, és a második, amikor a kurzor elhagyja az elemek.

Ha megnézzük a böngészőben, ha a kurzor és tenyésztési kiadási console.log.

Nézzük most egy második hover Element display: block, és amikor a kurzor Gone display: none

Ha megnézzük a böngészőben, ha lebeg át az első yelement mutatunk egy másik elem, és elrejti a kurzor, amikor elment.

Kapcsolódó cikkek