Händelsehantering i JavaScript

Articles

Den här artikeln förklarar händelsehantering 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ändelsehantering i JavaScript

Händelsehantering i JavaScript är en mekanism för att utföra specifika åtgärder som svar på användaroperationer (såsom klick och tangentbordsinmatningar) eller webbläsaråtgärder. Genom att ställa in händelselyssnare kan du skapa dynamiska och interaktiva webbsidor.

Grundläggande om händelser

Händelser uppstår som svar på användaroperationer och webbläsaråtgärder. När en händelse inträffar körs den associerade händelsehanteraren (funktionen). Till exempel finns det följande händelser:.

Klick (click)
Tangentbordsinmatning (keydown, keyup)
Musrörelse (mousemove, mouseover)
Formulärskickning (submit)
Sidladdning klar (DOMContentLoaded)
Rullning (scroll)

Lägga till händelselyssnare

Händelselyssnare ställs in med hjälp av metoden addEventListener(). Den här metoden anropar en specifik funktion när den angivna händelsen inträffar.

Grundläggande syntax för `addEventListener()`

1element.addEventListener(event, handler);

element är HTML-elementet som övervakar händelsen.
event är händelsens namn (till exempel, click).
handler är funktionen som körs när händelsen inträffar.

Händelseobjekt

När en händelse inträffar skickar JavaScript ett händelseobjekt som innehåller information om händelsen till händelsehanteraren. Detta objekt innehåller information som vilket element som utlöste händelsen och vilken tangent som trycktes ned.

Exempel: Använda händelseobjektet

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

Den här koden använder händelseobjektet för att visa detaljerad information och det klickade elementet i konsolen när knappen klickas.

Vanliga händelser

Klickhändelse

click-händelsen inträffar när användaren klickar på ett element.

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

Den här koden visar ett meddelande i konsolen när elementet klickas.

Tangentbordshändelser

keydown- och keyup-händelser inträffar när användaren trycker ned eller släpper en tangent. Du kan använda event.key för att se vilken tangent som trycktes ned.

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

Den här koden visar namnet på tangenten i konsolen när användaren trycker på en tangent.

Musrelaterade händelser

mousemove- och mouseover-händelser inträffar vid musrörelse och svävning över ett element.

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

Den här koden visar positionen (X- och Y-koordinater) i konsolen varje gång musen rör sig.

Formulärhändelser

Formulärrelaterade händelser inkluderar submit och input. submit-händelsen inträffar när ett formulär skickas och orsakar vanligtvis en sidomladdning, men event.preventDefault() används ofta för att förhindra detta.

Exempel: Förhindra sidomladdning vid formulärinlämning

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

Den här koden förhindrar att sidan laddas om när formuläret skickas in och visar istället ett meddelande i konsolen.

Händelsepropagering (bubbling och capturing)

Händelser propagerar genom två faser: capturing-fasen, som går från föräldraelement till barnelement, och bubbling-fasen, som går från barnelement till föräldraelement.

Händelsebubbling

Som standard inträffar händelser vid det innersta elementet och propagerar utåt. Detta kallas för bubbling.

Exempel: Bubbling-exempel

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 detta exempel, när du klickar på en knapp, inträffar knappens händelse först, följt av föräldraelementets händelse.

Händelsecapturing

Genom att ange true som det tredje argumentet i addEventListener() kan du hantera händelser i capturing-fasen.

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

Den här koden hanterar föräldraelementets klick-händelse i capture-fasen och visar ett meddelande i konsolen.

Förhindra propagering med `stopPropagation()`

Du kan stoppa händelser från att spridas genom att använda event.stopPropagation().

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

Den här koden förhindrar att händelsen propagerar när knappen klickas och visar ett meddelande i konsolen.

Ta bort händelser

Du kan ta bort händelsehanterare med hjälp av removeEventListener(). För att ta bort en händelsehanterare behöver du en referens till funktionen som angavs 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

Den här koden tar bort klick-händelselyssnaren från knappen så att den inte längre hanteras när den klickas.

Egna händelser

I JavaScript kan du skapa och trigga egna händelser utöver standardhändelser. Använd CustomEvent-konstruktorn.

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

Den här koden skapar och avfyrar en anpassad händelse myCustomEvent och visar dess detaljer i konsolen.

Sammanfattning

Händelsehantering är ett viktigt inslag för att öka interaktiviteten i webbapplikationer. Genom att använda komponenterna för händelsehantering kan du ge en mer flexibel och avancerad användarupplevelse.

Event Listener: Använd addEventListener() för att sätta en händelsehanterare på ett element.
Event Object: När en händelse inträffar skickas ett händelseobjekt som kan användas för att få detaljerad information.
Event Propagation: Händelser sprids i två faser: bubbling och capturing.
Form Events och Custom Events: Du kan hantera formulärinmatningar och skapa egna händelser.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Shadow DOM i JavaScript

Händelsehantering i JavaScript

YouTube Video

Händelsehantering i JavaScript

Grundläggande om händelser

Lägga till händelselyssnare

Grundläggande syntax för addEventListener()

Händelseobjekt

Exempel: Använda händelseobjektet

Vanliga händelser

Klickhändelse

Tangentbordshändelser

Musrelaterade händelser

Formulärhändelser

Exempel: Förhindra sidomladdning vid formulärinlämning

Händelsepropagering (bubbling och capturing)

Händelsebubbling

Exempel: Bubbling-exempel

Händelsecapturing

Förhindra propagering med stopPropagation()

Ta bort händelser

Egna händelser

Sammanfattning

YouTube Video

Grundläggande syntax för `addEventListener()`

Förhindra propagering med `stopPropagation()`