jQuery Academy · Lekcja

Tworzenie i wywoływanie niestandardowych zdarzeń

Tworzenie i wywoływanie niestandardowych zdarzeń to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Wprowadzenie do zdarzeń niestandardowych

Witaj! W tej lekcji nauczysz się tworzyć własne zdarzenia niestandardowe i zarządzać nimi w jQuery. To potężny sposób na zwiększenie uporządkowania i elastyczności kodu.

Pomyśl o zdarzeniach niestandardowych jak o specjalnych komunikatach, które różne części aplikacji internetowej mogą wysyłać i odbierać. Dzięki temu mogą się ze sobą komunikować bez bezpośredniego powiązania.

Dlaczego używać zdarzeń niestandardowych?

Po co używać zdarzeń niestandardowych? Pomagają rozwiązać częsty problem: silne powiązanie. Gdy komponenty są silnie powiązane, zmiana jednej części kodu może spowodować awarię innej.

Rozdzielenie zależności: Komponenty nie muszą znać swoich wewnętrznych mechanizmów działania.
Czystszy kod: Logika związana z konkretnym działaniem jest scentralizowana.
Elastyczność: Możesz łatwo dodawać lub usuwać listenery bez modyfikowania „nadawcy”.

Metoda .trigger()

Aby „wysłać” lub „wywołać” zdarzenie niestandardowe, używamy metody .trigger() biblioteki jQuery. Wywołujesz ją na obiekcie jQuery (elemencie lub document) i przekazujesz nazwę zdarzenia jako ciąg znaków.

Nazwa zdarzenia może być dowolna, na przykład 'dataLoaded' lub 'itemAdded'.

Demonstracja wywoływania zdarzenia

Zobaczmy działanie .trigger(). Wywołamy niestandardowe zdarzenie o nazwie 'myCustomEvent' na przycisku po jego kliknięciu. Na razie nic się nie stanie, ponieważ nikt go nie nasłuchuje!

<!-- HTML assumed to be present -->
<button id="triggerButton">Trigger Event</button>

<script>
$(document).ready(function() {
  $('#triggerButton').on('click', function() {
    // Fire our custom event on the button itself
    $(this).trigger('myCustomEvent');
    console.log('myCustomEvent triggered!');
  });
});
</script>

Nasłuchiwanie za pomocą .on()

Aby „odbierać” lub „nasłuchiwać” zdarzenia niestandardowego, używamy znanej już metody .on(). Podobnie jak w przypadku wbudowanych zdarzeń, takich jak 'click', określasz nazwę zdarzenia i funkcję uruchamianą po jego wywołaniu.

Możesz nasłuchiwać na tym samym elemencie, który wywołał zdarzenie, na elemencie nadrzędnym, a nawet na obiekcie document w przypadku zdarzeń globalnych.

Przykład wywoływania i nasłuchiwania

Połączmy teraz .trigger() i .on(). Kliknij przycisk, a zobaczysz komunikat informujący, że nasze zdarzenie niestandardowe zostało zarówno wywołane, jak i odebrane!

<!-- HTML assumed to be present -->
<button id="myButton">Click Me</button>
<p id="statusMessage">Status: Waiting...</p>

<script>
$(document).ready(function() {
  // 1. Listen for 'buttonClicked' on the button
  $('#myButton').on('buttonClicked', function() {
    $('#statusMessage').text('Status: Custom event received!');
  });

  // 2. When the button is clicked, trigger 'buttonClicked'
  $('#myButton').on('click', function() {
    $(this).trigger('buttonClicked');
  });
});
</script>

Przekazywanie danych wraz ze zdarzeniami

Zdarzenia niestandardowe są jeszcze bardziej użyteczne, gdy można przekazywać wraz z nimi dane. Po nazwie zdarzenia możesz wysłać do .trigger() dodatkowe argumenty. Zostaną one przekazane do funkcji obsługującej zdarzenie.

Pierwszym argumentem handlera jest zawsze obiekt zdarzenia.
Kolejne argumenty to dane przekazane za pomocą .trigger().

Demonstracja danych zdarzenia niestandardowego

Tutaj wywołujemy zdarzenie 'dataReady' i przekazujemy ciąg znaków oraz obiekt. Listener odbiera te dane i je wyświetla. W ten sposób komponenty mogą współdzielić informacje!

<!-- HTML assumed to be present -->
<button id="loadData">Load Data</button>
<p id="output"></p>

<script>
$(document).ready(function() {
  // Listen for 'dataReady' and extract the passed data
  $(document).on('dataReady', function(event, message, details) {
    const outputText = `Message: ${message}<br>Details: ${details.status} for ${details.item}`; 
    $('#output').html(outputText);
  });

  // When button clicked, trigger 'dataReady' with data
  $('#loadData').on('click', function() {
    const msg = 'Data successfully loaded!';
    const data = { status: 'complete', item: 'report' };
    $(document).trigger('dataReady', [msg, data]);
    console.log('Data event triggered!');
  });
});
</script>

Rozdzielenie zależności dla lepszych aplikacji

Wykorzystanie zdarzeń niestandardowych do komunikacji pomaga tworzyć bardziej modułowe i łatwiejsze w utrzymaniu aplikacje. Wyobraź sobie komponent „koszyka zakupowego” oraz komponent „wyświetlania produktu”.

Po dodaniu produktu komponent „wyświetlania produktu” wywołuje zdarzenie 'productAdded'.
Komponent „koszyka zakupowego” nasłuchuje zdarzenia 'productAdded' i aktualizuje się.

Żaden z komponentów nie musi znać wewnętrznych metod drugiego komponentu — wystarczy znajomość kontraktu zdarzenia.

Sprawdź swoje zrozumienie

Które z poniższych stwierdzeń poprawnie opisują korzyści lub sposób użycia zdarzeń niestandardowych wraz z .trigger() i .on()?

Podsumowanie: zdarzenia niestandardowe

Świetnie! Nauczyłeś(-aś) się tworzyć zdarzenia niestandardowe w jQuery i zarządzać nimi. Oto krótkie podsumowanie:

Co: Zdarzenia niestandardowe to definiowane przez użytkownika komunikaty dla komponentów aplikacji.
Dlaczego: Promują rozdzielenie zależności, prowadząc do czystszego i bardziej elastycznego kodu.
Jak: Użyj .trigger('eventName', [data]), aby wywołać zdarzenie.
Jak: Użyj .on('eventName', function(event, data) { ... }), aby nasłuchiwać zdarzenia.

Opanowanie zdarzeń niestandardowych to ważny krok w kierunku tworzenia niezawodnych i skalowalnych aplikacji jQuery!

Często zadawane pytania

Czy lekcja „Tworzenie i wywoływanie niestandardowych zdarzeń” jest bezpłatna?

Tak — pełny tekst „Tworzenie i wywoływanie niestandardowych zdarzeń” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Tworzenie i wywoływanie niestandardowych zdarzeń”?

Proszę projektować i implementować niestandardowe zdarzenia za pomocą .trigger() i .on(), aby rozdzielać komponenty, tworzyć przejrzystszy kod i umożliwiać elastyczną komunikację między różnymi częśc… Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?

Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.

Ile czasu zajmuje lekcja „Tworzenie i wywoływanie niestandardowych zdarzeń”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?

Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Solidna delegacja zdarzeń
Zatrzymywanie propagacji zdarzeń
Tworzenie i wywoływanie niestandardowych zdarzeń

← Powrót do jQuery Academy