Event Handling dalam JavaScript

Apa itu Event Handling?

Event handling adalah proses menangani interaksi pengguna atau peristiwa sistem pada elemen halaman web. Peristiwa (event) bisa berupa klik tombol, gerakan mouse, penekanan tombol keyboard, dan banyak lagi. JavaScript menyediakan cara untuk mendengarkan dan merespons peristiwa ini menggunakan event listeners.

Jenis-Jenis Event

Beberapa jenis event yang umum dalam JavaScript meliputi:

Mouse Events: click, dblclick, mouseover, mouseout, mousedown, mouseup, mousemove
Keyboard Events: keydown, keyup, keypress
Form Events: submit, change, focus, blur
Window Events: load, resize, scroll, unload

Penerapan Event Handling

Berikut adalah contoh penerapan event handling dalam HTML dan JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handling Example</title>
</head>
<body>
    <h1>Event Handling in JavaScript</h1>
    <button id="clickButton">Click Me</button>
    <input type="text" id="inputField" placeholder="Type something...">
    <form id="myForm">
        <input type="text" id="formInput" placeholder="Form input">
        <button type="submit">Submit</button>
    </form>
    <p id="output"></p>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', (event) => {
    // Mengakses Elemen
    const clickButton = document.getElementById('clickButton');
    const inputField = document.getElementById('inputField');
    const myForm = document.getElementById('myForm');
    const output = document.getElementById('output');

    // Event Handling untuk Klik Tombol
    clickButton.addEventListener('click', () => {
        output.textContent = 'Button clicked!';
    });

    // Event Handling untuk Input Field (keypress)
    inputField.addEventListener('keypress', (event) => {
        output.textContent = `You pressed: ${event.key}`;
    });

    // Event Handling untuk Form Submit
    myForm.addEventListener('submit', (event) => {
        event.preventDefault(); // Mencegah submit form secara default
        output.textContent = `Form submitted with input: ${myForm.elements['formInput'].value}`;
    });
});

Penjelasan Kode

Mengakses Elemen:

const clickButton = document.getElementById('clickButton');
const inputField = document.getElementById('inputField');
const myForm = document.getElementById('myForm');
const output = document.getElementById('output');

Mengakses elemen HTML dengan menggunakan getElementById.

Event Handling untuk Klik Tombol:
```
clickButton.addEventListener('click', () => {
    output.textContent = 'Button clicked!';
});
```
- Menambahkan event listener untuk peristiwa click pada tombol. Ketika tombol diklik, teks Button clicked! akan ditampilkan dalam elemen output.
Event Handling untuk Input Field (keypress):
```
inputField.addEventListener('keypress', (event) => {
    output.textContent = `You pressed: ${event.key}`;
});
```
- Menambahkan event listener untuk peristiwa keypress pada input field. Ketika sebuah tombol ditekan dalam input field, teks You pressed: <key> akan ditampilkan dalam elemen output, di mana <key> adalah tombol yang ditekan.
Event Handling untuk Form Submit:
```
myForm.addEventListener('submit', (event) => {
    event.preventDefault(); // Mencegah submit form secara default
    output.textContent = `Form submitted with input: ${myForm.elements['formInput'].value}`;
});
```
- Menambahkan event listener untuk peristiwa submit pada form. Ketika form disubmit, tindakan default (pengiriman form) dicegah dengan event.preventDefault(). Kemudian, teks Form submitted with input: <value> akan ditampilkan dalam elemen output, di mana <value> adalah nilai input dari form.

Sumber

Dengan event handling, Anda dapat membuat halaman web yang interaktif dan responsif terhadap tindakan pengguna, meningkatkan pengalaman pengguna secara keseluruhan.

PreviousDOM di JavaScript dan Cara manipulasinya NextTry, catch, dan finally dalam JavaScript

Last updated 10 months ago

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Handling Example</title> </head> <body> <h1>Event Handling in JavaScript</h1> <button id="clickButton">Click Me</button> <input type="text" id="inputField" placeholder="Type something..."> <form id="myForm"> <input type="text" id="formInput" placeholder="Form input"> <button type="submit">Submit</button> </form> <p id="output"></p> <script src="script.js"></script> </body> </html>

const clickButton = document.getElementById('clickButton'); const inputField = document.getElementById('inputField'); const myForm = document.getElementById('myForm'); const output = document.getElementById('output');

myForm.addEventListener('submit', (event) => { event.preventDefault(); // Mencegah submit form secara default output.textContent = `Form submitted with input: ${myForm.elements['formInput'].value}`; });