Obsługa zdarzeń w JavaScripcie

Articles

Ten artykuł wyjaśnia obsługę zdarzeń w JavaScripcie.

YouTube Video

javascript-html-event.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container-flex">
105        <div class="left-column">
106            <h2>HTML Sample</h2>
107            <div id="parentDiv">
108                <button id="myButton">Click me</button>
109            </div>
110        </div>
111
112        <div class="right-column">
113            <h2>Form Sample</h2>
114            <form id="myForm">
115                <input type="text" name="username">
116                <button type="submit">Submit</button>
117            </form>
118        </div>
119    </div>
120
121    <div class="container">
122        <h1>JavaScript Console</h1>
123        <button id="executeBtn">Execute</button>
124        <div id="output"></div>
125    </div>
126
127    <script>
128        // Override console.log to display messages in the #output element
129        (function () {
130            const originalLog = console.log;
131            console.log = function (...args) {
132                originalLog.apply(console, args);
133                const output = document.getElementById('output');
134                output.textContent += args.map(String).join(' ') + '\n';
135            };
136        })();
137
138        document.getElementById('executeBtn').addEventListener('click', () => {
139            // Prevent multiple loads
140            if (document.getElementById('externalScript')) return;
141
142            const script = document.createElement('script');
143            script.src = 'javascript-html-event.js';
144            script.id = 'externalScript';
145            //script.onload = () => console.log('javascript-html-event.js loaded and executed.');
146            //script.onerror = () => console.log('Failed to load javascript-html-event.js.');
147            document.body.appendChild(script);
148        });
149    </script>
150</body>
151</html>

Obsługa zdarzeń w JavaScripcie

Obsługa zdarzeń w JavaScripcie to mechanizm wykonywania określonych czynności w odpowiedzi na działania użytkownika (takie jak kliknięcia i wprowadzanie danych z klawiatury) lub działania przeglądarki. Ustawiając nasłuchiwanie zdarzeń, możesz tworzyć dynamiczne i interaktywne strony internetowe.

Podstawy zdarzeń

Zdarzenia występują w odpowiedzi na działania użytkownika i przeglądarki. Kiedy występuje zdarzenie, wykonywana jest powiązana z nim funkcja obsługi zdarzenia. Na przykład, istnieją następujące zdarzenia:.

Kliknięcie (click)
Wprowadzanie z klawiatury (keydown, keyup)
Ruch myszy (mousemove, mouseover)
Przesłanie formularza (submit)
Załadowanie strony (DOMContentLoaded)
Przewijanie (scroll)

Dodawanie nasłuchiwania zdarzeń

Nasłuchiwanie zdarzeń jest ustawiane za pomocą metody addEventListener(). Ta metoda wywołuje określoną funkcję, gdy wystąpi wskazane zdarzenie.

Podstawowa składnia `addEventListener()`

1element.addEventListener(event, handler);

element to element HTML, który monitoruje zdarzenie.
event to nazwa zdarzenia (na przykład click).
handler to funkcja wykonywana, gdy wystąpi zdarzenie.

Obiekt zdarzenia

Kiedy występuje zdarzenie, JavaScript przekazuje obiekt zdarzenia zawierający szczegóły zdarzenia do obsługi zdarzeń. Obiekt ten zawiera informacje, takie jak który element wywołał zdarzenie i który klawisz został naciśnięty.

Przykład: Użycie obiektu zdarzenia

1<button id="myButton">Click me</button>

1const button = document.getElementById('myButton');
2
3button.addEventListener('click', (event) => {
4    console.log(event);  // Display event details in the console
5    console.log('Clicked element:', event.target);  // Display the clicked element
6});

Ten kod wykorzystuje obiekt zdarzenia do wyświetlenia szczegółowych informacji oraz klikniętego elementu w konsoli po kliknięciu przycisku.

Typowe zdarzenia

Zdarzenie kliknięcia

Zdarzenie click występuje, gdy użytkownik kliknie element.

1element.addEventListener('click', () => {
2    console.log('Clicked');
3});

Ten kod wyświetla wiadomość w konsoli po kliknięciu elementu.

Zdarzenia klawiatury

Zdarzenia keydown i keyup występują, gdy użytkownik naciska lub zwalnia klawisz. Możesz użyć event.key, aby sprawdzić, który klawisz został naciśnięty.

1document.addEventListener('keydown', (event) => {
2    console.log(`Key pressed: ${event.key}`);
3});

Ten kod wyświetla nazwę klawisza w konsoli po naciśnięciu klawisza przez użytkownika.

Zdarzenia myszy

Zdarzenia mousemove i mouseover występują podczas ruchu myszy lub najechania kursorem.

1document.addEventListener('mousemove', (event) => {
2    console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});

Ten kod wyświetla pozycję (współrzędne X i Y) w konsoli za każdym razem, gdy porusza się myszą.

Zdarzenia formularza

Zdarzenia związane z formularzami obejmują submit i input. Zdarzenie submit występuje, gdy formularz jest wysyłany i zazwyczaj powoduje przeładowanie strony, ale często używa się event.preventDefault(), aby tego uniknąć.

Przykład: Zapobieganie przeładowaniu strony podczas wysyłania formularza

1<form id="myForm">
2    <input type="text" name="username">
3    <button type="submit">Submit</button>
4</form>

1const form = document.getElementById('myForm');
2
3form.addEventListener('submit', (event) => {
4    event.preventDefault();  // Prevent page reload
5    console.log('Form has been submitted');
6});

Ten kod zapobiega przeładowaniu strony po przesłaniu formularza i zamiast tego wyświetla wiadomość w konsoli.

Propagacja zdarzeń (przechwytywanie i bąbelkowanie)

Zdarzenia propagują się w dwóch etapach: fazie przechwytywania, która przebiega od elementów nadrzędnych do podrzędnych, oraz fazie bąbelkowania, która przebiega od elementów podrzędnych do nadrzędnych.

Bąbelkowanie zdarzeń

Domyślnie zdarzenia występują na najbardziej wewnętrznym elemencie i propagują się na zewnątrz. To nazywa się bąbelkowaniem.

Przykład: Przykład bąbelkowania

1<div id="parentDiv">
2    <button id="myButton">Click me</button>
3</div>

 1const parent = document.getElementById('parentDiv');
 2const button = document.getElementById('myButton');
 3
 4parent.addEventListener('click', () => {
 5    console.log('Parent element was clicked');
 6});
 7
 8button.addEventListener('click', () => {
 9    console.log('Button was clicked');
10});

W tym przykładzie, gdy klikniesz przycisk, najpierw wystąpi zdarzenie przycisku, a następnie zdarzenie elementu nadrzędnego.

Przechwytywanie zdarzeń

Podając true jako trzeci argument w addEventListener(), możesz obsługiwać zdarzenia w fazie przechwytywania.

1parent.addEventListener('click', () => {
2    console.log('Capturing: Parent element was clicked');
3}, true);

Ten kod obsługuje zdarzenie kliknięcia elementu nadrzędnego w fazie przechwytywania i wyświetla wiadomość w konsoli.

Zapobieganie propagacji za pomocą `stopPropagation()`

Możesz zatrzymać propagację zdarzeń, używając event.stopPropagation().

1button.addEventListener('click', (event) => {
2    event.stopPropagation();  // Stop the event propagation
3    console.log('Button was clicked (no propagation)');
4});

Ten kod zapobiega propagacji zdarzenia po kliknięciu przycisku i wyświetla wiadomość w konsoli.

Usuwanie zdarzeń

Możesz usuwać nasłuchiwacze zdarzeń, używając removeEventListener(). Aby usunąć nasłuchiwacz zdarzenia, potrzebujesz referencji do funkcji podanej w addEventListener().

1function handleClick() {
2    console.log('Clicked');
3}
4
5const button = document.getElementById('myButton');
6button.addEventListener('click', handleClick);
7button.removeEventListener('click', handleClick);  // Remove the event listener

Ten kod usuwa nasłuchiwanie zdarzenia kliknięcia z przycisku, aby nie było ono już obsługiwane po kliknięciu.

Niestandardowe zdarzenia

W JavaScript możesz tworzyć i wywoływać niestandardowe zdarzenia oprócz zdarzeń standardowych. Użyj konstruktora CustomEvent.

 1document.addEventListener('myCustomEvent', (event) => {
 2    console.log(event.detail.message);  // Displays "Hello!"
 3});
 4
 5const event = new CustomEvent('myCustomEvent', {
 6    detail: {
 7        message: 'Hello!'
 8    }
 9});
10document.dispatchEvent(event);

Ten kod tworzy i wywołuje niestandardowe zdarzenie myCustomEvent i wyświetla jego szczegóły w konsoli.

Podsumowanie

Obsługa zdarzeń jest kluczowym elementem zwiększającym interaktywność aplikacji internetowych. Wykorzystując elementy obsługi zdarzeń, możesz zapewnić bardziej elastyczne i zaawansowane doświadczenie użytkownika.

Nasłuchiwacz zdarzeń: Użyj addEventListener(), aby ustawić obsługę zdarzeń na elemencie.
Obiekt zdarzenia: Kiedy wystąpi zdarzenie, przekazywany jest obiekt zdarzenia, który można wykorzystać do uzyskania szczegółowych informacji.
Propagacja zdarzeń: Zdarzenia propagują się w dwóch fazach: bąbelkowania i przechwytywania.
Zdarzenia formularzy i zdarzenia niestandardowe: Możesz obsługiwać przesyłanie formularzy i własne niestandardowe zdarzenia.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Shadow DOM w JavaScript

Obsługa zdarzeń w JavaScripcie

YouTube Video

Obsługa zdarzeń w JavaScripcie

Podstawy zdarzeń

Dodawanie nasłuchiwania zdarzeń

Podstawowa składnia addEventListener()

Obiekt zdarzenia

Przykład: Użycie obiektu zdarzenia

Typowe zdarzenia

Zdarzenie kliknięcia

Zdarzenia klawiatury

Zdarzenia myszy

Zdarzenia formularza

Przykład: Zapobieganie przeładowaniu strony podczas wysyłania formularza

Propagacja zdarzeń (przechwytywanie i bąbelkowanie)

Bąbelkowanie zdarzeń

Przykład: Przykład bąbelkowania

Przechwytywanie zdarzeń

Zapobieganie propagacji za pomocą stopPropagation()

Usuwanie zdarzeń

Niestandardowe zdarzenia

Podsumowanie

YouTube Video

Podstawowa składnia `addEventListener()`

Zapobieganie propagacji za pomocą `stopPropagation()`