Na ovom blogu pokušat ću razjasniti osnove mehanizma za upravljanje događajima u JavaScript-u, bez pomoći bilo koje vanjske knjižnice poput Jquery / React / Vue.
U ovom članku ću objasniti sljedeće teme:
- Dokument i prozora objekata, te dodao slušatelje događaja na njih.
- Metoda Event.preventDefault () i njena upotreba.
- Metoda Event.stopPropagation () s primjerom.
- Kako ukloniti slušatelj događaja iz elementa.
Dokumentirajte i prozorske predmete pomoću slušatelja događaja
Objekt Window predstavlja karticu. U slučaju da čitate ovaj blog u odgovarajućem pregledniku, vaša trenutna kartica predstavlja objekt Prozor.
Prozorni objekt ima pristup informacijama poput alatne trake, visine i širine prozora, upita i upozorenja. Pogledajmo kako možemo dodati slušatelj događaja (mousedown) na objekt prozora i analizirati neka od njegovih svojstava.
Kako dodati slušatelja na objekt prozora
Metoda addEventListener je najpoželjniji način za dodavanje slušatelja događaja u prozor , dokument ili bilo koji drugi element u DOM-u.
Postoji još jedan način koji se naziva svojstvo "on" onclick, onmouseover, i tako dalje. Ali nije toliko korisno, jer nam ne dopušta dodavanje više slušatelja događaja na isti element. Ostale metode to dopuštaju.
Događaj objekt je prošao kao argument (dodatak) vodiča koji sadrži sve informacije vezane za događaj (u našem slučaju, mousedown) na prozoru.
Otvorite alate za programere (Inspect Element) na ovoj stranici i kopirajte zalijepite sljedeći kod na ploču konzole i pritisnite Enter.
window.addEventListener("mousedown",function(event){ alert("window"); console.log(event); });Nakon toga možete prijeći na bilo koji odjeljak trenutne kartice i desnim klikom vidjeti konzolu i informacije povezane s tim događajem, kao što je prikazano dolje na snimci.
Napomena : Ako prijeđete na bilo koju drugu karticu i kliknete desnom tipkom miša, tada se ovaj događaj neće pokrenuti jer pripada samo ovoj kartici (objekt Prozor).
Pojedinosti događaja mousedown
U sljedećih nekoliko redaka objasnit ću neke od važnih zarobljenih svojstava koja odgovaraju događaju mousedowna koji smo upravo izveli.
gumb : Budući da je ovo bio događaj mousedown, reći će vam gumb koji ste kliknuli. Za miša lijevo, srednje i desno odgovaraju 0, 1 i 2. Ako kliknete desni gumb, vidjet ćete vrijednost 2.
clientX i clientY : Položaj u odnosu na gornji lijevi dio područja sadržaja (prikaz). Samo analizirajte vrijednost ovih svojstava s mjestom koje ste kliknuli i vidjet ćete kako su povezana. Čak i ako pomičete stranicu prema dolje, ta svojstva ostaju ista. Referenca ScreenX i ScreenY s gornjeg lijevog dijela zaslona (Monitor).
altkey / ctrlkey : Ako držite pritisnutu bilo koju od ovih tipki tijekom izvođenja operacije desnog klika, tada možete vidjeti da su ove vrijednosti istinite. Inače su lažni kao u našem slučaju.
target: Odgovara elementu nad kojim ste izvršili radnju. Bez obzira na element na koji ste kliknuli, informacije koje odgovaraju ovom svojstvu možete vidjeti u konzoli
Što je objekt dokumenta ?
Dokument se sastoji od onoga što se nalazi unutar unutarnjeg prozora. Dokument predmet je korijen svakog čvora u DOM. Ako učitavate HTML stranicu u preglednik, tada dokument predstavlja cijelu tu stranicu.
Metoda Event.preventDefault () i njezino korištenje
Ponekad ne želimo da se HTML element ponaša onako kako bi se trebao ponašati prema zadanim postavkama. U takvom slučaju možemo se poslužiti ovom metodom.
Primjer : Klikom na element sidra preglednik će prema zadanim postavkama preusmjeriti na tu stranicu. Pokušajmo to izbjeći.
Google let link = document.querySelector("a"); // It is the method to access the first matched element link.addEventListener("click", function(event) { console.log("Redirecting Stopped"); event.preventDefault(); }); Možete stvoriti HTML datoteku i provjeriti ovaj kôd.
(±) Event.stopPropagation postupak
Događaji teku prema van. Postoje određeni slučajevi, na primjer kada imate ugniježđene elemente i izvodite neki događaj na djetetu, a na kraju izvrši neku radnju nad roditeljem, a koju želite izbjeći. U takvim je slučajevima ova metoda korisna.
Zvuči pomalo zbunjujuće, ali nadam se da će vam primjer u nastavku to jasno pokazati.
Zamislite da unutar odlomka imate gumb i obojici ste priložili događaj mousedowna. Želite postići sljedeće slučajeve upotrebe:
- Ako desnom tipkom miša kliknete gumb, on bi trebao pokazati da je na njega kliknuto i da se ne širi na nadređeni element (odnosno odlomak).
- Ako kliknete lijevi gumb, on bi se trebao normalno širiti prema van i aktivirati i preslušač događaja odlomaka.
Riješenje:
Hello Ho Button2
// Event Listener on the Button and it's logic document.getElementById("button12").addEventListener("mousedown", function(event) { alert("button clicked"); if (event.button == 2) // Right Click event.stopPropagation(); }); // Event Listener on the paragraph element with it's logic: document.getElementById("demo").addEventListener("mousedown", function(event) { alert("Paragraph clicked"); }); Uklanjanje jedan slušatelj događaja iz elementa
Da bismo uklonili slušatelj događaja iz elementa, moramo pozvati metodu removeEventListener s imenom događaja i imenom funkcije.
Napomena : kada se proslijede anonimne funkcije, one nemaju mapiranje memorije. Dakle, moramo definirati te funkcije izvan povratnog poziva, a zatim ih uputiti ovdje u povratnom pozivu removeEventListener.
Document.getElementbyId("id_name").removeEventListener("click",fn_name)Ako ste dosegli ovu točku, trebali biste pristojno razumjeti kako slušatelji događaja rade u JavaScript-u.
Ako vam se, dok radite s omiljenom bibliotekom / okvirima, ikad zaglavi u dijelu Rukovanje događajima, ove bi vam osnove trebale pomoći u rješavanju problema.