8.1 Tworzenie własnych zdarzeń
Własne zdarzenia (lub zdarzenia użytkownika) w JavaScript pozwalają programistom tworzyć i wywoływać własne zdarzenia, co może być przydatne do przekazywania informacji i interakcji między różnymi częściami aplikacji. Tworzenie i korzystanie z własnych zdarzeń może poprawić strukturę i elastyczność Twojego kodu, dostarczając sposób powiadamiania i zarządzania stanem aplikacji.
Do tworzenia własnych zdarzeń wykorzystuje się konstruktor CustomEvent. Ten konstruktor pozwala na tworzenie nowych zdarzeń z konfigurowalnymi parametrami i dodatkowymi danymi.
Składnia:
const event = new CustomEvent(type, {detail: additionalData});
Gdzie:
type: string, który reprezentuje nazwę zdarzeniadetail: obiekt, zawierający dodatkowe dane, które będą przekazane razem ze zdarzeniem
Przykład tworzenia własnego zdarzenia:
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });
8.2 Wywoływanie własnych zdarzeń
Wywoływanie zdarzenia odbywa się za pomocą metody dispatchEvent. Ta metoda jest wywoływana na elemencie, na którym ma dojść do zdarzenia.
Wyjaśnienie:
- Dodaje się obsługę zdarzenia
myCustomEventdo przyciskumyButton, który wyświetla w konsoli wiadomość z danych zdarzenia - Tworzy się własne zdarzenie
myCustomEventz wiadomością wdetail - Zdarzenie jest wywoływane na przycisku
myButton, uruchamiając obsługę i wyświetlając wiadomość w konsoli
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Example</title>
</head>
<body>
<button id="myButton">Button</button>
<script>
const button = document.getElementById('myButton');
// Dodawanie obsługi własnego zdarzenia
button.addEventListener('myCustomEvent', function(event) {
console.log('Custom event received:', event.detail.message);
});
// Tworzenie i wywoływanie własnego zdarzenia
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });
button.dispatchEvent(myEvent);
</script>
</body>
</html>
8.3 Zastosowanie własnych zdarzeń
Własne zdarzenia są przydatne do tworzenia bardziej modułowego i łatwiejszego w utrzymaniu kodu, zwłaszcza podczas pracy z komponentami i złożonymi aplikacjami. Pozwalają jednemu komponentowi powiadamiać inne komponenty o dokonanych zmianach lub działaniach.
Wyjaśnienie:
- Moduł A wywołuje własne zdarzenie
notifyBna elemenciemoduleB, przekazując dane - Moduł B nasłuchuje zdarzenia
notifyBi obsługuje je, wyświetlając wiadomość w konsoli
Przykład użycia własnych zdarzeń w aplikacji modułowej:
<!DOCTYPE html>
<html>
<head>
<title>Module Communication Example</title>
</head>
<body>
<div id="moduleA">Module A</div>
<div id="moduleB">Module B</div>
<script>
const moduleA = document.getElementById('moduleA');
const moduleB = document.getElementById('moduleB');
// Moduł A wywołuje własne zdarzenie
function notifyModuleB() {
const event = new CustomEvent('notifyB', { detail: { message: 'Data from Module A' } });
moduleB.dispatchEvent(event);
}
// Moduł B nasłuchuje własne zdarzenie
moduleB.addEventListener('notifyB', function(event) {
console.log('Module B received:', event.detail.message);
});
// Symulacja działania w Moduł A
notifyModuleB();
</script>
</body>
</html>
8.4 Parametry własnych zdarzeń
Własne zdarzenia mogą być dodatkowo konfigurowane za pomocą następujących parametrów:
bubbles: wartość logiczna wskazująca, czy zdarzenie ma być rozprzestrzeniane. Domyślniefalsecancelable: wartość logiczna wskazująca, czy zdarzenie może być anulowane. Domyślniefalsecomposed: wartość logiczna wskazująca, czy zdarzenie powinno być rozprzestrzeniane poza granice shadow DOM. Domyślniefalse
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Parameters Example</title>
</head>
<body>
<div id="container">
<button id="myButton">Button</button>
</div>
<script>
const container = document.getElementById('container');
const button = document.getElementById('myButton');
// Dodanie obsługi dla kontenera i przycisku
container.addEventListener('customEvent', function(event) {
console.log('Container received:', event.detail.message);
});
button.addEventListener('customEvent', function(event) {
console.log('Button received:', event.detail.message);
});
// Tworzenie i wywoływanie własnego zdarzenia z parametrami
const myEvent = new CustomEvent('customEvent', {
detail: { message: 'Hello from button' },
bubbles: true,
cancelable: true,
composed: false
});
button.dispatchEvent(myEvent);
</script>
</body>
</html>
GO TO FULL VERSION