Esborrany d’esdeveniments i captura d’esdeveniments són els termes més utilitzats en JavaScript en el moment del flux d’esdeveniments. Aquestes són les dues maneres de propagació d'esdeveniments a l'API DOM HTML. En aquest article sobre la publicació d'esdeveniments i la captura d'esdeveniments a JavaScript es descriurà detalladament per què els necessitem en la següent seqüència:
Què és l'esdeveniment de bombolles a JavaScript?
Esborrany d'esdeveniments és el terme amb què la gent ha de trobar-se mentre desenvolupa una aplicació web o una pàgina web . Bàsicament, Event Bubbling és una tècnica en què es diuen gestors d’esdeveniments quan un element està niat en un altre i ha de ser del mateix esdeveniment. És similar a l’encapsulació.
La publicació d'esdeveniments és només una petita part del tractament d'esdeveniments a JavaScript. Per entendre-ho millor, hem de saber sobre la propagació d’esdeveniments i sobre com admet la publicació d’esdeveniments.
Què és la propagació d'esdeveniments?
La propagació d'esdeveniments es pot comparar com a terme principal amb l'esdeveniment que bombolla i captura com a fill.Es representa de la següent manera:
Si feu clic a qualsevol imatge, no només generaria un esdeveniment de clic, sinó que passarà al pare 'a' i a l'avi 'li'. D'aquesta manera es produeix la propagació de la funció. Aquí es considera que la imatge és la secundària i és l'objectiu de l'esdeveniment on es genera el clic. La imatge juntament amb els seus avantpassats formen la branca en una terminologia d'arbre. La branca és important a mesura que anem coneixent el camí pel qual es propaga l'esdeveniment.
diferència entre css i css3
Es crida a cadascun dels oients amb un objecte d'esdeveniment, respectivament, que recopila informació sobre l'esdeveniment. Aquesta propagació és molt important ja que coneixem el procés de crida a tots els oients per a l’esdeveniment donat. A la imatge superior podem observar que la determinació de la branca és estàtica. Qualsevol modificació d'arbre que es produeixi durant l'esdeveniment s'ignora. Aquí la propagació és bidireccional, és a dir, va des de la finestra fins a l'objectiu de l'esdeveniment i es torna. Aquí la propagació es classifica a grans trets en tres tipus principals. Aquests són:
- La fase de captura: Anar de la finestra a la fase de destinació de l'esdeveniment.
- La fase objectiu: És la fase objectiu.
- La fase de bombolles: Des del pare de destinació de l'esdeveniment, torneu a la finestra.
Què és la captura d'esdeveniments?
En aquesta fase, es crida als oients capturadors el valor dels quals s'ha registrat com a 'veritable'. Està escrit com:
el.addEventListener ( 'clic', listener, true)
Aquí s'ha registrat el valor de l'oient per ser 'cert', de manera que s'està capturant aquest esdeveniment. Si no hi hagués cap valor, el valor per defecte seria fals i l'esdeveniment no es capturaria. Així, en aquesta fase, l'esdeveniment el valor del qual és cert només es troba a la finestra i es crida i es captura.
A continuació, a la fase de destinació de l'esdeveniment, es crida a tots els oients registrats independentment del seu estat de bandera que sigui cert o fals.
Ús de bombolles d'esdeveniments i captura d'esdeveniments a JavaScript
A la fase de bombolles, només es diu al no capturador, és a dir, els esdeveniments que tenen el valor de bandera com a 'fals'. La bombolla d’esdeveniments i la captura d’esdeveniments són molt útils i importants en la terminologia DOM (Document Object Model).
el.addEventListener ('clic', oient, fals) // oient no captura el.addEventListener ('clic', oient) // oient no capturaA la part superior del codi es mostra el funcionament de la fase de bombolles i captures. No tots els esdeveniments van a l'objectiu de l'esdeveniment. Alguns no es bombollen. El seu viatge s’atura després de la fase objectiu. El flux de tres fases d’esdeveniments s’il·lustra al següent diagrama:
La bombolla d’esdeveniments no funciona en tot tipus d’esdeveniments, però, l’oient ha de tenir-la “.Bubble ”Propietat booleana de l'objecte d'esdeveniment. Algunes de les altres propietats inclouen:
- e.target: que fa referència a l'objectiu de l'esdeveniment.
- e.currentTarget: és el mode en què es registren els oients actuals. Aquí es fa referència al valor fent servir això paraula clau.
- e.eventPhase: És un nombre enter que fa referència a altres tres paraules clau, com ara Capturing_phase, Bubbling_phase, AT_Target fase.
Procediment de treball
Vegem més de prop la il·lustració anterior. Fem clic a l'element 'buttonOne' i, immediatament, es desencadenarà un esdeveniment. Normalment, un esdeveniment comença el seu viatge des de l'arrel que és l'element més alt de l'arbre. A continuació, segueix l'arbre l'esdeveniment objectiu que és 'buttonOne'. Així és com viatja:
Com es mostra a la figura, l’esdeveniment s’obre camí a través de les terminologies DOM que arriben a l’esdeveniment objectiu al final. Ara, un cop l’esdeveniment assoleix el seu objectiu, no s’acaba. Continua i continua dins de les terminologies de DOM, tal com es mostra a la imatge següent.
Igual que abans, cada element al llarg del recorregut de l’esdeveniment a mesura que avança es notifica sobre la seva existència. A mesura que passa així, heu d'estar pensant si podem aturar el procés o no. Bé, la resposta a la pregunta és Sí, podem aturar la propagació de l'esdeveniment. Això es fa invocant el fitxer 'StopPropagation' mètode de l'objecte d'esdeveniment.
window.addEventListener ('clic', e => {e.stopPropagation ()}, true) window.addEventListener ('clic', listener ('c1'), true) window.addEventListener ('clic', listener ('c2 '), true) window.addEventListener (' clic ', listener (' b1 ')) window.addEventListener (' clic ', listener (' b2 '))En aplicar la paraula clau podem aturar la propagació. Funciona així, quan apliquem la paraula clau ' stopPropagation ' llavors no s'estan convocant tots els esdeveniments dels esdeveniments principals i, per tant, no s'anomenarien tal com s'esmenta a la peça de codi anterior. Hi ha una altra paraula clau coneguda com ' stopImmediatePropagation ”. Com el seu nom indica, atura immediatament els tràmits dels germans.
Amb això, hem arribat al final del nostre article. Espero que hagueu entès què és la captura d'esdeveniments i la captura d'esdeveniments a JavaScript.
Ara que ja coneixeu la publicació d'esdeveniments i la captura d'esdeveniments a JavaScript, consulteu el document per Edureka. La formació en certificació per al desenvolupament web us ajudarà a aprendre a crear llocs web impressionants mitjançant HTML5, CSS3, Twitter Bootstrap 3, jQuery i API de Google i implementar-lo a Amazon Simple Storage Service (S3).
Tens alguna pregunta? Si us plau, mencioneu-lo a la secció de comentaris de 'Bombollament d'esdeveniments i captura d'esdeveniments a JavaScript' i us respondrem.