onClick - zdarzenie kliknięcia elementu

Odpowiada za zdarzenie kliknięcia elementu przez użytkownika.

Przykładowy kod do zdarzenia onClick

                        function klik()
                        {
                            document.getElementById("id_click").style.display="block";
                        }
                        
                        document.getElementById("klik").addEventListener("click", klik

onChange - zdarzenie kiedy pole zmieni swoją zawartość

Odpowiada za zdarzenie zmiany w elemencie przez użytkownika

Przykładowy kod zdarzenia onChange

                        function zmien()
                        {
                            let x = document.getElementById("mySelect").value
                            document.getElementById("demo").innerHTML="Twój wybór: " + x
                        }

                        document.getElementById("mySelect").addEventListener("change", zmien)

Wybierz samochód z listy:

Jeśli zmienisz samochód zostanie on pokazany poniżej

onMauseover - odpowiada na najechanie na element kursorem

onMauseout - odpowiada za opuszczenie przez myszkę elementu

odpowiada za zdarzenie najechania na element kursorem oraz zdarza się gdy opuścimy elemnt kursorem

Przykładowy kod zdarzenia onMauseover

                        function over()
                        {
                            document.getElementById("mausy").style.color="red"
                        }

                        document.getElementById("mausy").addEventListener("mouseover", over)

                        function out()
                        {
                            document.getElementById("mausy").style.color="black"
                        }

                        document.getElementById("mausy").addEventListener("mouseout", out)

Najedź na mnie!

onDbclick - odpowiada za podwójnę naciśnięcie elementu przez użytkownika

odpowiada za zdarzenia kiedy użytkownik kliknie 2 razy

Przykładowy kod onDbclick

                        function db_kolor()
                        {
                            document.getElementById("db_button").innerHTML="Zostałem dwa razy kliknięty"
                        }

                        document.getElementById("db_button").addEventListener("dblclick", db_kolor)

submit - odpowiada za zdarzenie kiedy formularz jest zaakceptowany

Przykładowy kod submit

                        function form_sub()
                        {
                            alert("Formularz został wysłany")
                        }
                        
                        document.getElementById("form_submit").addEventListener("submit", form_sub)

resize - odpowiada za zdarzenie zmiany wielkości okna

Przykładowy kod resize

                        let x = 0
                        function win_res()
                        {
                            let txt = x +=1
                            document.getElementById("naliczanie").innerHTML=txt
                        }
                        
                        window.addEventListener("resize", win_res)

Okno zmeniło rozmiar 0 razy.

focus - odpowiada za zdarzenie skupienia uwagi na pewnym elemencie

Przykładowy kod focus

                        function focus_imie()
                        {
                            document.getElementById("imie_foc").style.backgroundColor="red"
                        }
                        
                        document.getElementById("imie_foc").addEventListener("focus", focus_imie)

Podaj swoje imię:

blur - odpowiada za zgubienie skupienia na elemencie

Przykładowy kod blur

                        function blur_action()
                        {
                            alert("Zgubiono uwagę z obiektu!")
                        }
                        
                        document.getElementById("inp_blur").addEventListener("blur", blur_action)

select - odpowiada za zdarzenie zaznaczenie tekstu

Przykładowy kod select

                        function select_fun()
                        {
                            document.getElementById("text_pozniej").style.color="red"
                        }
                        
                        document.getElementById("select_text").addEventListener("select", select_fun)

Zaznacz jakiś tekst:

Jeśli zaznaczysz tekst stanę się czerwony