Ce sunt evenimentele?
Evenimentele sunt acțiuni care se întâmplă atunci când un utilizator interacționează cu pagina – cum ar fi să faceți clic pe un element, să tastați un câmp sau să încărcați o pagină.
Browserul notifică sistemul că s-a întâmplat ceva și că trebuie tratat. Este gestionat prin înregistrarea unei funcții, numită event handler, care ascultă un anumit tip de eveniment.
Ce înseamnă să „gestionezi un eveniment”?
Pentru a spune acest lucru în termeni simpli, luați în considerare acest lucru – să presupunem că sunteți interesat să participați la evenimente de întâlniri de dezvoltare web în comunitatea dvs. locală.
Pentru a face acest lucru, vă înscrieți la o întâlnire locală numită „Femeile care codifică” și vă abonați la notificări. În acest fel, de fiecare dată când este programată o nouă întâlnire, veți fi alertat. Aceasta este gestionarea evenimentelor!
„Evenimentul” de aici este un nou întâlnire JS. Când este postat un nou întâlnire, site-ul web meetup.com surprinde această modificare, „gestionând” acest eveniment. Apoi vă anunță, luând astfel o „acțiune” asupra evenimentului.
Într-un browser, evenimentele sunt gestionate în mod similar. Browserul detectează o modificare și alertează o funcție (gestionarea evenimentelor) care ascultă un anumit eveniment. Aceste funcții efectuează apoi acțiunile după cum doriți.
Să ne uităm la un exemplu de click organizatorul evenimentului:
<div class="buttons">
<button>Press 1</button>
<button>Press 2</button>
<button>Press 3</button>
</div>
const buttonContainer = document.querySelector('.buttons');
console.log('buttonContainer', buttonContainer);
buttonContainer.addEventListener('click', event => {
console.log(event.target.value)
})
Care sunt diferitele tipuri de evenimente?
Un eveniment poate fi declanșat de fiecare dată când un utilizator interacționează cu pagina. Aceste evenimente ar putea fi un utilizator care parcurge pagina, face clic pe un element sau încarcă o pagină.
Iată câteva evenimente comune – onclick dblclick mousedown mouseup mousemove keydown keyup touchmove touchstart touchend onload onfocus onblur onerror onscroll
Diferite faze ale evenimentelor – captare, țintă, bule
Atunci când un eveniment se mișcă prin DOM – indiferent dacă clocotește sau coboară – se numește propagare a evenimentului. Evenimentul se propagă prin arborele DOM.
Evenimentele se petrec în două faze: faza de clocot și faza de captare.
În faza de captare, numită și faza de prelingere, evenimentul „se prelinge” până la elementul care a provocat evenimentul.
Începe de la elementul de nivel rădăcină și de la handler, apoi se propagă până la element. Faza de captare este finalizată când evenimentul ajunge la target.
În faza cu bule, evenimentul este „buleț” până la arborele DOM. Mai întâi este captat și tratat de cel mai intern handler (cel care este cel mai aproape de elementul pe care s-a produs evenimentul). Apoi, se ridică (sau se propagă) la nivelurile superioare ale arborelui DOM, mai departe până la părinții săi, și apoi la rădăcină.
Ea este un truc pentru a vă ajuta să vă amintiți acest lucru:
trickle down, bubble up
Iată un infografic de la mod ciudat asta explică foarte bine acest lucru:
/
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Event BUBBLING |
-----------------------------------
| |
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 / | |
| ------------------------- |
| Event CAPTURING |
-----------------------------------
Un lucru de reținut este că, indiferent dacă înregistrați un gestionar de evenimente în ambele faze, ambele faze se întâmplă ÎNTOTDEAUNA. Toate evenimentele apar în mod implicit.
Puteți înregistra gestionare de evenimente, fie pentru fază, pentru barbotare, fie pentru capturare, utilizând funcția addEventListener(type, listener, useCapture). Dacă useCapture este setat sa false, gestionarul de evenimente se află în faza de barbotare. Altfel este în faza de captură.
Ordinea fazelor evenimentului depinde de browser.
Pentru a verifica mai întâi ce onoruri de browser captură, puteți încerca următorul cod în JSfiddle:
<div id="child-one">
<h1>
Child One
</h1>
</div>
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);
În Firefox, Safari și Chrome, rezultatul este următorul:
Cum să ascultați un eveniment
Există două moduri de a asculta un eveniment:
addEventListener- evenimente în linie, cum ar fi
onclick
//addEventListener
document.getElementByTag('a').addEventListener('click', onClickHandler);
//inline using onclick
<a href="#" onclick="onClickHandler">Click me</a>
Ceea ce este mai bine – un eveniment în linie sau addEventListener?
-
addEventListenervă oferă posibilitatea de a înregistra handler-uri de evenimente nelimitate. -
removeEventListenerpoate fi, de asemenea, utilizat pentru a elimina gestionarele de evenimente -
useCapturesemnalizatorul poate fi folosit pentru a indica dacă un eveniment trebuie tratat în faza de captare sau în faza combinată.
Exemple de coduri și acțiuni live
Puteți încerca aceste evenimente în JSFiddle pentru a vă juca cu ele.
<div id="wrapper-div">
<div id="child-one">
<h1>
Child One
</h1>
</div>
<div id="child-two" onclick="childTwoHandler">
<h1>
Child Two
</h1>
</div>
</div>
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
Fazele evenimentului sunt captură (DOM -> țintă), balon (țintă-> DOM) și țintă.
Evenimentele pot fi ascultate folosind addEventListener sau metode inline precum 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 <script> elements.
addEventListener can take a third argument which can stop the event propagation.
Lectură ulterioară
https://www.quirksmode.org/js/events_order.html
https://jsfiddle.net/r2bc6axg/
https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick
https://www.w3.org/wiki/HTML/Attributes/_Global#Event-handler_Attributes
Pentru a ține pasul cu mai multe tutoriale scurte de genul acesta, inscrie-te la newsletter-ul meu sau urmărește-mă pe Twitter
