Håndtering av hendelser i JavaScript

Articles

Denne artikkelen forklarer håndtering av hendelser 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 av hendelser i JavaScript

Håndtering av hendelser i JavaScript er en mekanisme for å utføre spesifikke handlinger som svar på brukeroperasjoner (for eksempel klikk og tastaturinnganger) eller nettleserhandlinger. Ved å sette opp hendelseslyttere kan du lage dynamiske og interaktive nettsider.

Grunnleggende om hendelser

Hendelser oppstår som svar på brukeroperasjoner og nettleserhandlinger. Når en hendelse oppstår, blir den tilknyttede hendelsesbehandleren (funksjonen) utført. For eksempel finnes det hendelser som disse:.

Klikk (click)
Tastaturinngang (keydown, keyup)
Musebevegelse (mousemove, mouseover)
Skjemainnsending (submit)
Siden lastet ferdig (DOMContentLoaded)
Rulling (scroll)

Legge til hendelseslyttere

Hendelseslyttere settes opp ved bruk av metoden addEventListener(). Denne metoden kaller en spesifikk funksjon når den angitte hendelsen inntreffer.

Grunnleggende syntaks for `addEventListener()`

1element.addEventListener(event, handler);

element er HTML-elementet som overvåker hendelsen.
event er navnet på hendelsen (for eksempel, click).
handler er funksjonen som kjøres når hendelsen inntreffer.

Hendelsesobjekt

Når en hendelse oppstår, sender JavaScript et hendelsesobjekt som inneholder detaljene til hendelsen til hendelseshåndtereren. Dette objektet inkluderer informasjon som hvilket element som utløste hendelsen, og hvilken tast som ble trykket.

Eksempel: Bruke hendelsesobjektet

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 koden bruker hendelsesobjektet til å vise detaljert informasjon og det klikkede elementet i konsollen når knappen klikkes.

Typiske hendelser

Klikkhendelse

click-hendelsen oppstår når brukeren klikker på et element.

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

Denne koden viser en melding i konsollen når elementet klikkes.

Tastaturhendelser

keydown- og keyup-hendelser oppstår når brukeren trykker ned eller slipper en tast. Du kan bruke event.key for å se hvilken tast som ble trykket.

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

Denne koden viser navnet på tasten i konsollen når brukeren trykker på en tast.

Musehendelser

mousemove- og mouseover-hendelser oppstår ved musebevegelse og når markøren holdes over et element.

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

Denne koden viser posisjonen (X- og Y-koordinater) i konsollen hver gang musen beveger seg.

Skjemahendelser

Skjemarelaterte hendelser inkluderer submit og input. submit-hendelsen skjer når et skjema sendes inn og forårsaker vanligvis en sideoppdatering, men event.preventDefault() brukes ofte for å forhindre dette.

Eksempel: Forhindre sideoppdatering ved innsending av skjema

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 koden forhindrer at siden lastes på nytt når skjemaet sendes inn, og viser i stedet en melding i konsollen.

Hendelsesforplantning (Bubbling og Capturing)

Hendelser forplanter seg gjennom to faser: capturing-fasen, som beveger seg fra overordnede elementer til underordnede elementer, og bubbling-fasen, som beveger seg fra underordnede elementer til overordnede elementer.

Hendelsesbubbling

Som standard skjer hendelser på det innerste elementet og forplanter seg utover. Dette kalles 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 eksemplet, når du klikker på en knapp, skjer knappens hendelse først, etterfulgt av hendelsen til det overordnede elementet.

Hendelsescapturing

Ved å spesifisere true som det tredje argumentet i addEventListener(), kan du håndtere hendelser i capturing-fasen.

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

Denne koden håndterer overordnede elementets klikkhendelse i fangstfasen og viser en melding i konsollen.

Forhindre forplantning med `stopPropagation()`

Du kan stoppe hendelser fra å propagere ved å bruke event.stopPropagation().

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

Denne koden forhindrer at hendelsen sprer seg når knappen klikkes og viser en melding i konsollen.

Fjerne hendelser

Du kan fjerne hendelseslyttere ved å bruke removeEventListener(). For å fjerne en hendelseslytter, trenger du en referanse til funksjonen som er spesifisert 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 koden fjerner klikk-hendelseslytteren fra knappen slik at den ikke lenger håndteres når den klikkes.

Egendefinerte hendelser

I JavaScript kan du lage og utløse egendefinerte hendelser i tillegg til standardhendelser. Bruk 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 koden oppretter og sender en egendefinert hendelse myCustomEvent og viser dens detaljer i konsollen.

Sammendrag

Hendelseshåndtering er et essensielt element for å forbedre interaktiviteten til nettapplikasjoner. Ved å bruke komponentene for hendelseshåndtering, kan du tilby en mer fleksibel og avansert brukeropplevelse.

Hendelseslytter: Bruk addEventListener() for å tildele en hendelseshåndterer til et element.
Hendelsesobjekt: Når en hendelse oppstår, sendes et hendelsesobjekt som kan brukes til å hente detaljerte opplysninger.
Hendelsespropagering: Hendelser propagere i to faser: bobling og fangst.
Skjemahendelser og egendefinerte hendelser: Du kan håndtere skjemainnleveringer og dine egne egendefinerte hendelser.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Shadow DOM i JavaScript

Håndtering av hendelser i JavaScript

YouTube Video

Håndtering av hendelser i JavaScript

Grunnleggende om hendelser

Legge til hendelseslyttere

Grunnleggende syntaks for addEventListener()

Hendelsesobjekt

Eksempel: Bruke hendelsesobjektet

Typiske hendelser

Klikkhendelse

Tastaturhendelser

Musehendelser

Skjemahendelser

Eksempel: Forhindre sideoppdatering ved innsending av skjema

Hendelsesforplantning (Bubbling og Capturing)

Hendelsesbubbling

Eksempel: Bubbling-eksempel

Hendelsescapturing

Forhindre forplantning med stopPropagation()

Fjerne hendelser

Egendefinerte hendelser

Sammendrag

YouTube Video

Grunnleggende syntaks for `addEventListener()`

Forhindre forplantning med `stopPropagation()`