Håndtering af begivenheder i JavaScript

Articles

Denne artikel forklarer håndtering af begivenheder i JavaScript.

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>

Håndtering af begivenheder i JavaScript

Håndtering af begivenheder i JavaScript er en mekanisme til at udføre specifikke handlinger som svar på brugeroperationer (såsom klik og tastaturinput) eller browserhandlinger. Ved at opsætte begivenhedslyttere kan du skabe dynamiske og interaktive websider.

Grundlæggende om begivenheder

Begivenheder opstår som svar på brugeroperationer og browserhandlinger. Når en begivenhed opstår, udføres den tilknyttede begivenhedshåndteringsfunktion. For eksempel er der begivenheder som følgende:.

Klik (click)
Tastaturinput (keydown, keyup)
Musebevægelse (mousemove, mouseover)
Formularindsendelse (submit)
Sideindlæsning fuldført (DOMContentLoaded)
Rulning (scroll)

Tilføjelse af begivenhedslyttere

Begivenhedslyttere opsættes ved hjælp af addEventListener()-metoden. Denne metode kalder en specifik funktion, når den specificerede begivenhed opstår.

Grundlæggende syntaks for `addEventListener()`

1element.addEventListener(event, handler);

element er HTML-elementet, der overvåger hændelsen.
event er hændelsesnavnet (for eksempel click).
handler er den funktion, der udføres, når hændelsen opstår.

Begivenhedsobjekt

Når en hændelse opstår, giver JavaScript en hændelsesobjekt, der indeholder detaljerne om hændelsen, til hændelseshåndtereren. Dette objekt inkluderer oplysninger som hvilket element der udløste hændelsen og hvilken tast der blev trykket på.

Eksempel: Brug af hændelsesobjektet

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});

Denne kode bruger hændelsesobjektet til at vise detaljerede oplysninger og det klikkede element i konsollen, når knappen klikkes.

Typiske hændelser

Klik-hændelse

click-hændelsen opstår, når brugeren klikker på et element.

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

Denne kode viser en besked i konsollen, når elementet klikkes.

Tastaturhændelser

keydown- og keyup-hændelser opstår, når brugeren trykker på eller slipper en tast. Du kan bruge event.key til at se, hvilken tast der blev trykket på.

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

Denne kode viser navnet på tasten i konsollen, når brugeren trykker på en tast.

Mus-hændelser

mousemove- og mouseover-hændelser opstår ved musebevægelse og hover.

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

Denne kode viser positionen (X- og Y-koordinater) i konsollen, hver gang musen bevæger sig.

Formularhændelser

Formularrelaterede hændelser inkluderer submit og input. submit-hændelsen opstår, når en formular indsendes og forårsager normalt en sidegenindlæsning, men event.preventDefault() bruges ofte til at forhindre dette.

Eksempel: Forhindre sidegenindlæsning ved formularindsendelse

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});

Denne kode forhindrer siden i at genindlæses, når formularen indsendes, og viser i stedet en besked i konsollen.

Hændelsesudbredelse (Bubbling og Capturing)

Hændelser udbredes gennem to faser: capturing-fasen, som bevæger sig fra forældrelementerne til barneelementerne, og bubbling-fasen, som bevæger sig fra barneelementerne til forældrelementerne.

Hændelsesbubbling

Som standard opstår hændelser ved det inderste element og udbreder sig udad. Dette kaldes bubbling.

Eksempel: Bubbling-eksempel

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});

I dette eksempel, når du klikker på en knap, opstår knappens hændelse først, efterfulgt af forældrelementets hændelse.

Hændelsescapturing

Ved at angive true som det tredje argument i addEventListener() kan du håndtere hændelser i capturing-fasen.

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

Denne kode håndterer det overordnede elements klik-hændelse i indfangningsfasen og viser en besked i konsollen.

Forhindre udbredelse med `stopPropagation()`

Du kan stoppe hændelser fra at sprede sig ved at bruge event.stopPropagation().

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

Denne kode forhindrer hændelsen i at blive videresendt, når knappen klikkes, og viser en besked i konsollen.

Fjernelse af hændelser

Du kan fjerne hændelseslyttere ved at bruge removeEventListener(). For at fjerne en hændelseslytter har du brug for en reference til funktionen, der er specificeret i 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

Denne kode fjerner klik-hændelseslytteren fra knappen, så den ikke længere håndteres, når der klikkes.

Brugerdefinerede hændelser

I JavaScript kan du oprette og udløse brugerdefinerede hændelser ud over standardhændelser. Brug CustomEvent-konstruktøren.

 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);

Denne kode opretter og udløser en brugerdefineret hændelse myCustomEvent og viser dens detaljer i konsollen.

Sammendrag

Hændelseshåndtering er et væsentligt element for at forbedre interaktiviteten i webapplikationer. Ved at udnytte komponenterne i hændelseshåndtering kan du tilbyde en mere fleksibel og sofistikeret brugeroplevelse.

Hændelseslytter: Brug addEventListener() til at tilføje en hændelseshåndterer til et element.
Hændelsesobjekt: Når en hændelse opstår, bliver et hændelsesobjekt sendt, som kan bruges til at opnå detaljeret information.
Hændelsesspredning: Hændelser spreder sig i to faser: bubbling og capturing.
Formularhændelser og brugerdefinerede hændelser: Du kan håndtere formularindsendelser og dine egne brugerdefinerede hændelser.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Shadow DOM i JavaScript

Håndtering af begivenheder i JavaScript

YouTube Video

Håndtering af begivenheder i JavaScript

Grundlæggende om begivenheder

Tilføjelse af begivenhedslyttere

Grundlæggende syntaks for addEventListener()

Begivenhedsobjekt

Eksempel: Brug af hændelsesobjektet

Typiske hændelser

Klik-hændelse

Tastaturhændelser

Mus-hændelser

Formularhændelser

Eksempel: Forhindre sidegenindlæsning ved formularindsendelse

Hændelsesudbredelse (Bubbling og Capturing)

Hændelsesbubbling

Eksempel: Bubbling-eksempel

Hændelsescapturing

Forhindre udbredelse med stopPropagation()

Fjernelse af hændelser

Brugerdefinerede hændelser

Sammendrag

YouTube Video

Grundlæggende syntaks for `addEventListener()`

Forhindre udbredelse med `stopPropagation()`