Mik az események?

Az események olyan műveletek, amelyek akkor történnek, amikor a felhasználó interakcióba lép az oldallal - például rákattint egy elemre, beír egy mezőt vagy betölti az oldalt.

A böngésző értesíti a rendszert arról, hogy történt valami, és azt kezelni kell. Kezelését egy függvény, egy úgynevezett an regisztrálásával event handlervégezzük, amely egy adott típusú eseményre figyel.

Mit jelent az "esemény kezelése"?

Leegyszerűsítve ezt vegye fontolóra - tegyük fel, hogy érdekli Önt a Webfejlesztés találkozóinak látogatása a helyi közösségében.

Ehhez regisztrálnia kell egy "Women Who Code" nevű helyi találkozóra, és feliratkozik az értesítésekre. Így bármikor új találkozót ütemeznek, és figyelmeztetést kap. Ez az eseménykezelés!

Az "esemény" itt egy új JS találkozó. Új találkozó közzétételekor a meetup.com webhely elkapja ezt a változást, ezáltal "kezelve" ezt az eseményt. Ezután értesíti Önt, és így "cselekszik" az eseményen.

A böngészőben az eseményeket hasonlóan kezelik. A böngésző észlel egy változást, és figyelmeztet egy funkciót (eseménykezelő), amely egy adott eseményt hallgat. Ezek a funkciók ezután a kívánt műveleteket hajtják végre.

Nézzünk meg egy clickeseménykezelő példát :

 Press 1 Press 2 Press 3 const buttonContainer = document.querySelector('.buttons'); console.log('buttonContainer', buttonContainer); buttonContainer.addEventListener('click', event => { console.log(event.target.value) }) 

Melyek a különböző típusú események?

Egy esemény bármikor kiváltható, amikor a felhasználó interakcióba lép az oldallal. Ezek az események lehetnek a felhasználó görgetése az oldalon, az elemre kattintás vagy az oldal betöltése.

Íme néhány gyakori esemény - onclickdblclickmousedownmouseupmousemovekeydownkeyuptouchmovetouchstarttouchendonloadonfocusonbluronerror onscroll

Az események különböző fázisai - elfogás, célzás, buborék

Amikor egy esemény mozog a DOM-on - akár felfelé bugyogva, akár lefelé csöpögve -, akkor ezt eseményterjesztésnek nevezzük. Az esemény a DOM fán keresztül terjed.

Az események két fázisban történnek: a buborékoltatási és a befogási fázisban.

Az elfogási fázisban, amelyet csepegési fázisnak is neveznek, az esemény "lecsepeg" az eseményt kiváltó elemig.

A gyökérszintű elemtől és a kezelőtől indul, majd továbbhalad az elemig. A rögzítési szakasz akkor fejeződik be, amikor az esemény eléri a target.

A buborékfázisban az eseményt a DOM-fáig "buborékoltatják" fel. Először a legbelső kezelő rögzíti és kezeli (amelyik legközelebb áll ahhoz az elemhez, amelyen az esemény bekövetkezett). Ezután felszaporodik (vagy továbbterjed) a DOM fa magasabb szintjeire, tovább a szüleihez, majd végül a gyökeréhez.

Ez egy trükk, amely segít emlékezni erre:

trickle down, bubble up 

Itt egy infografika a quirksmode-ból, amely ezt nagyon jól megmagyarázza:

 / \ ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 | | | | | ------------------------- | | Event BUBBLING | ----------------------------------- | | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | Event CAPTURING | ----------------------------------- 

Egy dolgot meg kell jegyezni, hogy függetlenül attól, hogy valamelyik fázisban regisztrál-e eseménykezelőt, mindkét szakasz MINDIG megtörténik. Alapértelmezés szerint az összes esemény buborék.

A funkció használatával regisztrálhat eseménykezelőket fázisra, buborékolásra vagy rögzítésre addEventListener(type, listener, useCapture). Ha useCaptureez értéke be van állítva false, akkor az eseménykezelő buborékos szakaszban van. Egyébként a rögzítés szakaszában van.

Az esemény fázisainak sorrendje a böngészőtől függ.

Először ellenőrizze, hogy a böngésző melyik kitüntetést részesíti előnyben, próbálja ki a következő kódot a JSfiddle-ben:

 Child One 

const childOne = document.getElementById("child-one"); const childOneHandler = () => { console.log('Captured on child one') } const childOneHandlerCatch = () => { console.log('Captured on child one in capture phase') } childOne.addEventListener("click", childOneHandler); childOne.addEventListener("click", childOneHandlerCatch, true); 

Firefox, Safari és Chrome böngészőben a kimenet a következő:

Hogyan lehet meghallgatni egy eseményt

Kétféle módon lehet meghallgatni egy eseményt:

1. addEventListener
2. soros események, mint pl onclick

//addEventListener document.getElementByTag('a').addEventListener('click', onClickHandler); //inline using onclick Click me 

Melyik a jobb - egy inline esemény vagy addEventListener?

1. addEventListener lehetővé teszi korlátlan eseménykezelők regisztrálását.
2. removeEventListener eseménykezelők eltávolítására is használható
3. A useCapturezászlóval jelezhető, hogy egy eseményt a rögzítési vagy a kötegelt szakaszban kell-e kezelni.

Kódpéldák és live-action

Kipróbálhatja ezeket az eseményeket a JSFiddle-ben, hogy játszhasson velük.

 Child One 
 Child Two 

const wrapperDiv = document.getElementById("wrapper-div"); const childOne = document.getElementById("child-one"); const childTwo = document.getElementById("child-two"); const childOneHandler = () => { console.log('Captured on child one') } const childTwoHandler = () => { console.log('Captured on child two') } const wrapperDivHandler = () => { console.log('Captured on wrapper div') } const childOneHandlerCatch = () => { console.log('Captured on child one in capture phase') } const childTwoHandlerCatch = () => { console.log('Captured on child two in capture phase') } const wrapperDivHandlerCatch = () => { console.log('Captured on wrapper div in capture phase') } childOne.addEventListener("click", childOneHandler); childTwo.addEventListener("click", childTwoHandler); wrapperDiv.addEventListener("click", wrapperDivHandler); childOne.addEventListener("click", childOneHandlerCatch, true); childTwo.addEventListener("click", childTwoHandlerCatch, true); wrapperDiv.addEventListener("click", wrapperDivHandlerCatch, true); 

TL; DR

Az esemény fázisai a rögzítés (DOM -> cél), a buborék (cél-> DOM) és a cél.

Az eseményeket meghallgathatja olyan addEventListenermódszerekkel vagy inline módszerekkel, mint a onclick.

 addEventListener can add multiple events, whereas with onclick this cannot be done. onclick can be added as an HTML attribute, whereas an addEventListener can only be added within  elements. addEventListener can take a third argument which can stop the event propagation. 

További olvasmány

//www.quirksmode.org/js/events_order.html

//jsfiddle.net/r2bc6axg/

//stackoverflow.com/questions/6348494/addeventlistener-vs-onclick

//www.w3.org/wiki/HTML/Attributes/_Global#Event-handler_Attributes

Ha további lépéseket szeretne tartani az ilyen rövid oktatóanyagokról, iratkozzon fel a hírlevelemre, vagy kövessen a Twitteren