Close Menu

Event Handling dalam JavaScript

Table of Contents

Event handling adalah cara untuk menangani peristiwa yang terjadi di halaman web, seperti klik tombol, gerakan mouse, penekanan tombol keyboard, dan lainnya. Dengan event handling, Anda dapat membuat halaman web yang interaktif dan responsif terhadap tindakan pengguna.

Metode untuk Menangani Peristiwa #

Ada beberapa cara untuk menambahkan event handler ke elemen HTML:

Inline Event Handler: Menambahkan event handler langsung ke elemen HTML dengan atribut acara.

<button onclick="alert('Button clicked!')">Click Me</button>

Event Handler Properti: Menetapkan fungsi ke properti event handler dari elemen HTML.

<button id="myButton">Click Me</button>
<script>
    let button = document.getElementById("myButton");
    button.onclick = function() {
        alert('Button clicked!');
    };
</script>

addEventListener: Metode yang lebih fleksibel dan direkomendasikan untuk menambahkan event listener ke elemen HTML.

<button id="myButton">Click Me</button>
<script>
    let button = document.getElementById("myButton");
    button.addEventListener("click", function() {
        alert('Button clicked!');
    });
</script>

Jenis-Jenis Peristiwa #

JavaScript mendukung berbagai jenis peristiwa yang dapat ditangani, termasuk:

Mouse Events: click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove

Keyboard Events: keydown, keyup, keypress

Form Events: submit, focus, blur, change

Window Events: load, resize, scroll

Contoh Event Handling #

Berikut adalah beberapa contoh bagaimana menangani berbagai jenis peristiwa dalam JavaScript:

Contoh: Menangani Peristiwa Klik

<!DOCTYPE html>
<html>
<head>
    <title>Click Event</title>
    <script>
        function handleClick() {
            alert('Button clicked!');
        }
    </script>
</head>
<body>
    <button onclick="handleClick()">Click Me</button>
</body>
</html>

Contoh: Menangani Peristiwa Mouse

<!DOCTYPE html>
<html>
<head>
    <title>Mouse Event</title>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
    <script>
        function handleMouseOver() {
            document.getElementById("myDiv").style.backgroundColor = "lightgreen";
        }

        function handleMouseOut() {
            document.getElementById("myDiv").style.backgroundColor = "lightblue";
        }
    </script>
</head>
<body>
    <div id="myDiv" onmouseover="handleMouseOver()" onmouseout="handleMouseOut()"></div>
</body>
</html>

Contoh: Menangani Peristiwa Keyboard

<!DOCTYPE html>
<html>
<head>
    <title>Keyboard Event</title>
    <script>
        function handleKeyDown(event) {
            alert('Key pressed: ' + event.key);
        }
    </script>
</head>
<body onkeydown="handleKeyDown(event)">
    <input type="text" placeholder="Press any key">
</body>
</html>

Contoh: Menggunakan addEventListener

<!DOCTYPE html>
<html>
<head>
    <title>Add Event Listener</title>
    <script>
        window.onload = function() {
            let button = document.getElementById("myButton");
            button.addEventListener("click", function() {
                alert('Button clicked!');
            });

            let div = document.getElementById("myDiv");
            div.addEventListener("mouseover", function() {
                div.style.backgroundColor = "lightgreen";
            });
            div.addEventListener("mouseout", function() {
                div.style.backgroundColor = "lightblue";
            });

            let input = document.getElementById("myInput");
            input.addEventListener("keydown", function(event) {
                console.log('Key pressed: ' + event.key);
            });
        };
    </script>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <button id="myButton">Click Me</button>
    <div id="myDiv"></div>
    <input id="myInput" type="text" placeholder="Press any key">
</body>
</html>

Pada contoh di atas:

Tombol menampilkan pesan ketika diklik.

Div mengubah warna latar belakang ketika mouse bergerak di atasnya dan kembali ke warna asli ketika mouse keluar.

Input menangkap dan menampilkan tombol yang ditekan di konsol.

Event Object #

Ketika sebuah peristiwa terjadi, sebuah objek peristiwa (event object) dibuat yang berisi informasi tentang peristiwa tersebut. Objek peristiwa ini secara otomatis diteruskan ke fungsi event handler dan dapat digunakan untuk mendapatkan informasi tambahan tentang peristiwa.

<!DOCTYPE html>
<html>
<head>
    <title>Event Object</title>
    <script>
        function handleClick(event) {
            alert('Event type: ' + event.type + '\nElement ID: ' + event.target.id);
        }

        function handleKeyPress(event) {
            console.log('Key pressed: ' + event.key + '\nKey code: ' + event.keyCode);
        }
    </script>
</head>
<body>
    <button id="myButton" onclick="handleClick(event)">Click Me</button>
    <input id="myInput" type="text" onkeypress="handleKeyPress(event)" placeholder="Press any key">
</body>
</html>

Pada contoh di atas, handleClick menggunakan objek peristiwa untuk menampilkan tipe peristiwa dan ID elemen yang memicu peristiwa tersebut. handleKeyPress menggunakan objek peristiwa untuk menampilkan tombol yang ditekan dan kode tombol.

Dengan memahami dan menggunakan event handling dalam JavaScript, Anda dapat membuat halaman web yang lebih interaktif dan responsif terhadap tindakan pengguna. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

What are your Feelings