Zdarzenia to akcje lub zdarzenia, które mają miejsce w systemie. W świecie programowania zdarzenia to coś, co dzieje się z elementami HTML. Ale kiedy jest używany na stronach HTML, może reagować na te zdarzenia. W tym artykule zobaczymy, jakie są różne typy zdarzeń w JavaScript i jak one działają, w następującej kolejności:
Co to są zdarzenia w JavaScript?
Javascript zawiera zdarzenia, które zapewniają dynamiczny interfejs strony internetowej. Te zdarzenia są połączone z elementami w Model obiektu dokumentu (OSĄD).
Ponadto te zdarzenia domyślnie używają propagacji propagacji, tj. W górę w DOM, od dzieci do rodzica. Możemy wiązać zdarzenia jako inline lub w zewnętrznym skrypcie. Za pomocą JavaScript możesz wykryć, kiedy mają miejsce określone zdarzenia i spowodować, że coś się wydarzy w odpowiedzi na te zdarzenia.
Rodzaje zdarzeń w JavaScript
W programie są różne typy wydarzeń które są używane do reagowania na zdarzenia. Tutaj omówimy niektóre ze znanych lub najczęściej używanych wydarzeń, takich jak:
- Na kliknięcie
- Onkeyup
- Onmouseover
- Onload
- Onfocus
Przejdźmy więc dalej i przyjrzyjmy się tym zdarzeniom w JavaScript na przykładzie.
Zdarzenie Onclick
Zdarzenie Onclick jest zdarzeniem myszy i wywołuje dowolną logikę zdefiniowaną, jeśli użytkownik kliknie element, z którym jest powiązany. Weźmy przykład i zobaczmy, jak to działa:
function edu () {alert ('Witaj w Edurece!')} Kliknij przyciskWynik:
Po kliknięciu przycisku zostanie wyświetlony następujący komunikat ostrzegawczy:
Wydarzenie Onekeyup
To zdarzenie jest zdarzeniem klawiaturowym i jest używane do wykonywania instrukcji za każdym razem, gdy klawisz zostanie zwolniony po naciśnięciu. Poniższy przykład ilustruje działanie wydarzenia:
var a = 0 var b = 0 var c = 0 function changeBackground () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + ',' + b + ',' + c + ')' a + = 1 b + = a + 1 c + = b + 1 if (a> 255) a = a - b if (b> 255) b = a if (c> 255) c = b}Wynik:
Po napisaniu czegoś wygląda to tak:
data w przykładzie sql
Wydarzenie Onmouseover
Zdarzenie onmouseover w JavaScript odpowiada najechaniu kursorem myszy na element i jego elementy podrzędne, z którymi jest powiązany. Przykład pokazano poniżej:
function hov () {var e = document.getElementById ('hover') e.style.display = 'none'}Wynik:
Kolorowe pole pojawia się przed najechaniem myszą. Gdy najedziesz kursorem myszy na pole, zniknie.
Zdarzenie dotyczące ładowania
Zdarzenie onload jest wywoływane po całkowitym załadowaniu elementu. Weźmy przykład i zobaczmy, jak to działa:
Wynik:
Wydarzenie Onfocus
Zdarzenie Onfocus zawiera listę elementów, która wykonuje instrukcje za każdym razem, gdy otrzyma fokus. Poniższy przykład pokazuje, jak działa zdarzenie onfocus:
function focus () {var e = document.getElementById ('input') if (confirm ('Focus Event')) {e.blur ()}}Fokus w polu wprowadzania:
Wynik:
Oto niektóre z najczęściej używanych zdarzeń w JavaScript. Tym samym doszliśmy do końca naszego artykułu. Mam nadzieję, że rozumiesz, czym są wydarzenia i jak są wykorzystywane.
Sprawdź nasze który obejmuje szkolenie na żywo prowadzone przez instruktora i rzeczywiste doświadczenie projektowe. To szkolenie zapewni Ci biegłość w pracy z technologiami internetowymi zaplecza i front-endu. Obejmuje szkolenia w zakresie tworzenia stron internetowych, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy na tym blogu, a my skontaktujemy się z Tobą.