Transmiterea datelor în gestionarul de evenimente - Obiectul Event
Uneori este necesar să se transmită anumite date către gestionarul de evenimente. Dacă gestionarii de evenimente sunt setați folosind atributele elementelor, atunci acest lucru este destul de simplu. De exemplu, să transmitem în gestionarul apăsării unui buton un text care va fi utilizat în gestionar:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<button id="btn" onclick="btn_click('Button Clicked')">Click Me</button>
<script>
// în gestionar este transmis textul
function btn_click(text){
console.log(text); // afișăm acest text
}
</script>
</body>
</html>Astfel, în gestionarul butonului este transmis un anumit text:
<button id="btn" onclick="btn_click('Button Clicked')">În funcția gestionarului, obținem acest text și îl folosim într-un anumit mod, de exemplu, îl afișăm pe consolă:
function btn_click(text){
console.log(text); // afișăm acest text
}În acest caz, în funcția gestionarului a fost transmis un șir de caractere, dar în realitate, acesta poate fi orice obiect. De exemplu, prin valoarea this se poate transmite obiectul curent pe care are loc evenimentul:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<button id="btn" onclick="btn_click(this)">Click Me</button>
<script>
let clicks = 0; // contor de apăsări
// în gestionar este transmisă referința la elementul buton
function btn_click(btn){
// schimbăm textul butonului
btn.textContent = Clicked ${++clicks};
</script>
</body>
</html>Cuvântul cheie this indică obiectul curent pe care se face clic. Și în codul gestionarului putem obține acest obiect și ne putem referi la proprietățile sale, de exemplu, la proprietatea textContent și astfel să schimbăm textul butonului.
Este de menționat că, în unele cazuri, poate fi necesar să returnăm din gestionar valoarea false. De exemplu, să luăm în considerare următorul program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<a id="link" href="https://fdc.com" onclick="return a_click(this)">fdc.com</a>
<script>
// în gestionar este transmisă referința
function a_click(anchor){
// obținem adresa linkului
console.log(anchor.href);
return false; // interzicem redirecționarea
}
</script>
</body>
</html>Aici, în atributul onclick al linkului - elementul <a> nu este doar apelat gestionarul de evenimente, ci este returnat rezultatul său:
<a id="link" href="https://fdc.com" onclick="return a_click(this)">Iar funcția gestionarului returnează false:
function a_click(anchor){
console.log(anchor.href);
return false; // interzicem redirecționarea
}Chestia este că, pentru unele gestionare de evenimente, putem confirma sau opri procesarea evenimentului. De exemplu, clicul pe un link ar trebui să conducă la redirecționare.
Dar returnând din gestionar false, putem opri calea standard de procesare a evenimentului, și astfel nu va avea loc redirecționarea. Dacă returnăm valoarea true, atunci evenimentul este procesat în mod standard.
Dacă eliminăm complet returnarea rezultatului, atunci evenimentul va fi procesat ca și cum ar returna valoarea true:
<a id="link" href="https://fdc.com" onclick="a_click(this)">FDC.com</a>
<script>
function a_click(anchor){
console.log(anchor.href);
}
</script>Obiectul Event
La procesarea evenimentului, browserul transmite automat în funcția gestionarului ca parametru obiectul Event, care încapsulează toate informațiile despre eveniment. Și cu ajutorul proprietăților sale putem obține aceste informații:
- bubbles: returnează true dacă evenimentul este propagabil. (De exemplu, dacă evenimentul a apărut pe un element încorporat, atunci el poate fi procesat pe elementul părinte.)
- ancelable: returnează true dacă se poate anula procesarea standard a evenimentului
- currentTarget: definește elementul la care este atașat gestionarul de evenimente
- defaultPrevented: returnează true dacă a fost apelată metoda preventDefault() pe obiectul Event
- eventPhase: stochează un număr care reprezintă etapa de procesare a evenimentului : (0 (Event.NONE), 1 (Event.CAPTURING_PHASE), 2 (Event.AT_TARGET), 3 (Event.BUBBLING_PHASE)
- target: indică elementul pe care a fost apelat evenimentul
- timeStamp: stochează timpul apariției evenimentului
- type: indică numele evenimentului
- isTrusted: indică dacă evenimentul a fost generat de elementele paginii web sau de codul JavaScript
De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<button onclick="btn_click(event)">Click Me</button>
<script>
function btn_click(e){
console.log(e);
}
</script>
</body>
</html>La apelarea funcției handler, informațiile despre eveniment sunt disponibile prin obiectul event. Acest obiect nu este definit de dezvoltator, este doar un argument al funcției handler care păstrează toate informațiile despre eveniment:
<button onclick="btn_click(event)">În codul JavaScript, acest obiect poate fi obținut printr-un parametru al funcției:
function btn_click(e){
console.log(e);
}În acest caz, pur și simplu afișăm obiectul pe consolă. Dar, desigur, am putea obține și informații specifice despre eveniment:
function btn_click(e){
console.log("Type:", e.type); // Type: click
console.log("Target:", e.target); // Target: <button onclick="btn_click(event)">Click Me</button>
console.log("Timestamp:", e.timeStamp);
}Putem obține obiectul evenimentului dacă handlerul evenimentului este atașat prin proprietățile elementelor sau prin metoda addEventListener(). De exemplu, atașarea unui handler printr-o proprietate a elementului:
<button id="btn">Click Me</button>
<script>
function btn_click(e){
console.log("Type:", e.type);
console.log("Target:", e.target);
console.log("Timestamp:", e.timeStamp);
}
// Stabilim un handler de click pentru elementul cu id="btn"
document.getElementById("btn").onclick = btn_click;
</script>Sau atașarea unui handler cu metoda addEventListener:
<button id="btn">Click Me</button>
<script>
function btn_click(e){
console.log("Type:", e.type);
console.log("Target:", e.target);
console.log("Timestamp:", e.timeStamp);
}
const btn = document.getElementById("btn");
btn.addEventListener("click", btn_click);
</script>Oprirea executării evenimentului
Cu ajutorul metodei preventDefault() a obiectului Event putem opri executarea ulterioară a evenimentului. În unele cazuri, această metodă nu joacă un rol major. Totuși, în anumite situații poate fi utilă. De exemplu, la apăsarea pe un link, putem decide prin procesare suplimentară dacă să executăm sau să interzicem trecerea la link.
Sau un alt exemplu: un utilizator trimite datele unui formular, dar în timpul procesării în handlerul evenimentului descoperim că datele formularului sunt completate incorect, și în acest caz putem interzice de asemenea trimiterea.
De exemplu, să oprim trecerea la un link:
<a id="link" href="https://fdc.com">fdc.com</a>
<script>
function linkHandler(e){
console.log("Link has been clicked");
e.preventDefault(); // oprim trecerea la link
}
const link = document.getElementById("link");
link.addEventListener("click", linkHandler);
</script>Aici, la apăsarea pe link, va fi activată metoda linkHandler. Și, deoarece în această metodă prevenim trecerea la link prin apelul e.preventDefault(), trecerea nu va avea loc. Acest abordare este adesea folosită în cererile ajax, unde este necesar să procesăm apăsarea pe un link, dar fără a efectua trecerea la un alt resurs, ci făcând o solicitare la acesta din codul JavaScript fără a reîncărca pagina.
Obținerea obiectului curent
Pentru a obține obiectul curent pentru care se procesează evenimentul, în interiorul handlerului evenimentului putem folosi cuvântul cheie this:
<button id="btn">Click Me</button>
<script>
const btn = document.getElementById("btn");
function btn_click(){
console.log(this); // <button id="btn">Click Me</button>
}
btn.addEventListener("click", btn_click);
</script>Aici, la procesarea evenimentului click pe buton, obiectul this în funcția btn_click va reprezenta acest buton. De fapt, în acest caz, valorile this și e.target ar fi echivalente:
function btn_click(e){
console.log(this === e.target); // true
}