Apel programat al Evenimentelor

Evenimentele pot apărea nu doar ca urmare a acțiunilor utilizatorului pe o pagină web. Evenimentele pot fi de asemenea generate programat.

„Pentru a declanșa un eveniment programat, la un element pe o pagină web se poate apela metoda dispatchEvent(), în care se transmite o instanță a obiectului Event (sau a tipurilor sale derivate, cum ar fi MouseEvent sau KeyboardEvent).

const event = new Event(nume_eveniment, config);   // definim obiectul eveniment
element.dispatchEvent(event);   // declanșăm evenimentul pentru elementul element

Primul argument transmis constructorului Event este un șir de caractere - tipul evenimentului. Opțional, ca al doilea parametru, se poate transmite un obiect de configurare. În special, cu ajutorul obiectului de configurare se pot defini următoarele proprietăți:

cancelable: dacă evenimentul poate fi anulat (dacă este true, evenimentul este anulabil, false - neanulabil)
bubbles: dacă evenimentul trebuie să fie ascendent (dacă este true, evenimentul este ascendent)

De exemplu, să declanșăm programat un clic pe un link:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <a id="link" href="https://fdc.com">fdc.com</a>
   <script>
   const link = document.getElementById("link");   // obținem link-ul
   const event = new MouseEvent("click");
   link.dispatchEvent(event);
   </script>
</body>
</html>

Apăsarea pe link reprezintă un eveniment mouse "click", deci definim obiectul eveniment de tip MouseEvent:

const event = new MouseEvent("click");

Apoi declanșăm evenimentul pentru elementul link:

link.dispatchEvent(event);

În final, va avea loc navigarea către link imediat la încărcarea paginii.

Și ca în cazul general, acest eveniment poate fi de asemenea procesat:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <a id="link" href="https://fdc.com">fdc.com</a>
   <script>
   const link = document.getElementById("link");

   link.addEventListener("click", (e)=>{
       console.log("Link has been clicked");
       e.preventDefault();     // prevenim navigarea
   });

   const event = new MouseEvent("click", {cancelable: true});
   link.dispatchEvent(event);
   </script>
</body>
</html>

Pentru ca execuția evenimentului să poată fi oprită, în constructorul MouseEvent, ca al doilea parametru, transmitem un obiect de configurare cu o singură proprietate: cancelable: true indică faptul că procesarea evenimentului poate fi oprită.

Datorită aceasta, în handler-ul evenimentului "click" putem apela metoda e.preventDefault() pentru a preveni acțiunea implicită (în acest caz, navigarea către link).