Wydarzenia formularzy

Formularze w Parku Jurajskim służą do rejestracji gości, zarządzania personelem i systemów bezpieczeństwa. Podobnie w aplikacjach webowych formularze są kluczowe dla interakcji z użytkownikami.

Obsługa formularzy

1const ticketBookingForm = document.getElementById('booking-form');
2const emailInput = document.getElementById('email');
3const phoneInput = document.getElementById('phone');
4const ticketTypeSelect = document.getElementById('ticket-type');
5
6// Submit - wysłanie formularza
7ticketBookingForm.addEventListener('submit', (e) => {
8  e.preventDefault();
9  
10  const formData = new FormData(ticketBookingForm);
11  const bookingData = {
12    name: formData.get('name'),
13    email: formData.get('email'),
14    phone: formData.get('phone'),
15    ticketType: formData.get('ticket-type'),
16    visitDate: formData.get('visit-date'),
17    guestCount: parseInt(formData.get('guest-count'))
18  };
19  
20  if (validateBookingData(bookingData)) {
21    submitBooking(bookingData);
22  }
23});
24
25// Input - zmiana wartości w polu
26emailInput.addEventListener('input', (e) => {
27  const email = e.target.value;
28  if (isValidEmail(email)) {
29    e.target.classList.remove('invalid');
30    e.target.classList.add('valid');
31  } else {
32    e.target.classList.remove('valid');
33    e.target.classList.add('invalid');
34  }
35});
36
37// Change - zmiana wartości (wywoływane po opuszczeniu pola)
38ticketTypeSelect.addEventListener('change', (e) => {
39  const selectedType = e.target.value;
40  updateTicketPrice(selectedType);
41  showTicketTypeInfo(selectedType);
42});

Kontekst

this

w event handlerach

Ważnym aspektem event handlerów jest kontekst

this

. W tradycyjnej funkcji (function expression),

this

odnosi się do elementu, na którym zarejestrowano event listener - czyli do elementu, do którego "przypięliśmy" handler.

1const submitBtn = document.getElementById('submit-btn');
2
3// Tradycyjna funkcja - this wskazuje na element z listenerem
4submitBtn.addEventListener('click', function(event) {
5  console.log(this);          // <button id="submit-btn">
6  console.log(this === event.currentTarget); // true
7  console.log(event.target);  // element, który faktycznie kliknięto
8
9  // this to element z listenerem, event.target to element kliknięty
10  this.textContent = 'Wysłano!';
11  this.disabled = true;
12});
13
14// Arrow function - this NIE wskazuje na element!
15submitBtn.addEventListener('click', (event) => {
16  console.log(this); // window (lub undefined w strict mode)
17  // Arrow functions nie mają własnego this
18  // Używaj event.currentTarget zamiast this
19  event.currentTarget.textContent = 'Wysłano!';
20});

"Pamiętaj," ostrzega Ray, "arrow functions nie mają własnego

this

. Jeśli potrzebujesz odwołać się do elementu przez

this

, używaj tradycyjnych funkcji. Jeśli wolisz arrow functions, używaj

event.currentTarget

."