25+ Jenis Event JavaScript: Master Event Handling untuk Interaktivitas Website

By | September 27, 2025
0 Comment

Table of Contents

25+ Jenis Event JavaScript: Master Event Handling untuk Interaktivitas Website

Pernah kepikiran gimana website bisa “nge-response” ketika kamu klik button, scroll halaman, atau ketik di form? Rahasianya ada di event JavaScript! Event itu seperti sensor yang membuat website jadi “hidup” dan interaktif. Tanpa event handling, website kita cuma jadi pajangan statis yang boring.

Dalam panduan lengkap ini, kita akan eksplor jenis event JavaScript yang paling penting dan bagaimana menggunakannya untuk membuat website yang truly interactive. Dari click events sederhana sampai complex gesture detection – semuanya akan kita bahas dengan contoh praktis. Ready to make your website come alive?

Apa Itu Event Handling dalam JavaScript?

Sebelum masuk ke jenis-jenis event, mari pahami dulu konsep dasarnya.

Analoginya: Sistem Alarm Rumah

  • Event: Pencuri membuka jendela (kejadian)
  • Event Listener: Sensor gerak yang mendeteksi
  • Event Handler: Alarm berbunyi (tindakan)
  • Event Target: Jendela yang dibuka (target)

Cara Kerja Event Handling

// Basic event handling structure
element.addEventListener('event-type', function(event) {
    // Kode yang dijalankan ketika event terjadi
    console.log('Event terjadi!', event);
});

Kategori Event JavaScript

Mari kelompokkan event berdasarkan jenis interaksinya:

1. Mouse Events – Interaksi dengan Mouse

Event yang terjadi ketika user berinteraksi menggunakan mouse.

click – Ketika Element Diklik

const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
    console.log('Button diklik!');
    event.preventDefault(); // Mencegah behavior default
});

// Contoh praktis: Toggle menu
const menuButton = document.querySelector('.menu-btn');
const navbar = document.querySelector('.navbar');

menuButton.addEventListener('click', function() {
    navbar.classList.toggle('active');
    this.textContent = navbar.classList.contains('active') ? '✕' : '☰';
});

dblclick – Double Click

const image = document.querySelector('.profile-image');

image.addEventListener('dblclick', function() {
    this.classList.toggle('enlarged');
    console.log('Gambar di-double click!');
});

// Contoh: Zoom image on double click
image.addEventListener('dblclick', function() {
    if (this.style.transform === 'scale(2)') {
        this.style.transform = 'scale(1)';
    } else {
        this.style.transform = 'scale(2)';
    }
});

mouseenter & mouseleave – Hover Effects

const card = document.querySelector('.product-card');

card.addEventListener('mouseenter', function() {
    this.style.transform = 'translateY(-5px)';
    this.style.boxShadow = '0 10px 20px rgba(0,0,0,0.2)';
});

card.addEventListener('mouseleave', function() {
    this.style.transform = 'translateY(0)';
    this.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
});

// Tooltip example
const tooltipTrigger = document.querySelector('.tooltip-trigger');
const tooltip = document.querySelector('.tooltip');

tooltipTrigger.addEventListener('mouseenter', function() {
    tooltip.style.opacity = '1';
    tooltip.style.visibility = 'visible';
});

tooltipTrigger.addEventListener('mouseleave', function() {
    tooltip.style.opacity = '0';
    tooltip.style.visibility = 'hidden';
});

mousemove – Tracking Pergerakan Mouse

document.addEventListener('mousemove', function(event) {
    const x = event.clientX;
    const y = event.clientY;
    
    // Custom cursor effect
    const cursor = document.querySelector('.custom-cursor');
    cursor.style.left = x + 'px';
    cursor.style.top = y + 'px';
    
    // Parallax effect
    const parallaxElements = document.querySelectorAll('.parallax');
    parallaxElements.forEach(element => {
        const speed = element.getAttribute('data-speed');
        element.style.transform = `translateX(${x * speed}px) translateY(${y * speed}px)`;
    });
});

contextmenu – Right Click

document.addEventListener('contextmenu', function(event) {
    event.preventDefault(); // Block default right-click menu
    
    // Custom context menu
    const customMenu = document.getElementById('custom-context-menu');
    customMenu.style.display = 'block';
    customMenu.style.left = event.pageX + 'px';
    customMenu.style.top = event.pageY + 'px';
});

// Hide custom menu when clicking elsewhere
document.addEventListener('click', function() {
    const customMenu = document.getElementById('custom-context-menu');
    customMenu.style.display = 'none';
});

2. Keyboard Events – Interaksi dengan Keyboard

Event yang terjadi ketika user menekan tombol keyboard.

keydown & keyup – Deteksi Penekanan Tombol

document.addEventListener('keydown', function(event) {
    console.log('Key pressed:', event.key, 'Code:', event.code);
    
    // Keyboard shortcuts
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault(); // Block browser save
        saveDocument();
    }
    
    // Game controls
    if (event.key === 'ArrowUp') {
        movePlayer('up');
    } else if (event.key === 'ArrowDown') {
        movePlayer('down');
    }
});

document.addEventListener('keyup', function(event) {
    console.log('Key released:', event.key);
    
    // Stop movement when key released
    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
        stopPlayer();
    }
});

keypress (Deprecated) – Gunakan keydown

Note: keypress sudah deprecated, gunakan keydown sebagai gantinya.

3. Form Events – Interaksi dengan Form Elements

Event khusus untuk form dan input elements.

submit – Ketika Form Disubmit

const contactForm = document.getElementById('contact-form');

contactForm.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent form submission
    
    // Form validation
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;
    
    if (!validateEmail(email)) {
        showError('Please enter a valid email address');
        return;
    }
    
    if (message.length < 10) {
        showError('Message must be at least 10 characters');
        return;
    }
    
    // Submit form via AJAX
    submitForm(this);
});

function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

input & change – Perubahan Value Input

const searchInput = document.getElementById('search');

// input event fires immediately on value change
searchInput.addEventListener('input', function(event) {
    const query = event.target.value;
    
    // Live search with debouncing
    clearTimeout(this.debounce);
    this.debounce = setTimeout(() => {
        performSearch(query);
    }, 300);
});

// change event fires when input loses focus after value changed
const selectBox = document.getElementById('category');
selectBox.addEventListener('change', function(event) {
    filterProducts(event.target.value);
});

// Real-time character counter
const messageInput = document.getElementById('message');
const charCount = document.getElementById('char-count');

messageInput.addEventListener('input', function() {
    const length = this.value.length;
    charCount.textContent = `${length}/500`;
    
    if (length > 500) {
        charCount.style.color = 'red';
    } else {
        charCount.style.color = 'green';
    }
});

focus & blur – Ketika Element Focused/Unfocused

const formInputs = document.querySelectorAll('input, textarea');

formInputs.forEach(input => {
    input.addEventListener('focus', function() {
        this.parentElement.classList.add('focused');
        this.setAttribute('placeholder', ''); // Clear placeholder on focus
    });
    
    input.addEventListener('blur', function() {
        this.parentElement.classList.remove('focused');
        this.setAttribute('placeholder', this.getAttribute('data-placeholder'));
        
        // Validate on blur
        validateField(this);
    });
});

4. Window Events – Event yang Terkait dengan Browser Window

Event yang terjadi pada window object (browser window).

load & DOMContentLoaded – Ketika Halaman Siap

// DOMContentLoaded - ketika DOM siap (sebelum images load)
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM ready!');
    initializeApp();
    setupEventListeners();
});

// load - ketika seluruh page selesai load (termasuk images)
window.addEventListener('load', function() {
    console.log('Page fully loaded');
    hideLoadingSpinner();
    initializeAnimations();
});

// Beforeunload - sebelum user meninggalkan page
window.addEventListener('beforeunload', function(event) {
    if (hasUnsavedChanges) {
        event.preventDefault();
        event.returnValue = 'You have unsaved changes. Are you sure you want to leave?';
        return event.returnValue;
    }
});

resize – Ketika Window Di-resize

window.addEventListener('resize', function() {
    console.log('Window resized:', window.innerWidth, 'x', window.innerHeight);
    
    // Responsive design adjustments
    if (window.innerWidth < 768) { enableMobileLayout(); } else { enableDesktopLayout(); } // Debounce untuk performance clearTimeout(this.resizeTimer); this.resizeTimer = setTimeout(() => {
        handleResizeComplete();
    }, 250);
});

scroll – Ketika User Scroll Halaman

window.addEventListener('scroll', function() {
    const scrollY = window.scrollY;
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;
    
    // Progress bar
    const progress = (scrollY / (documentHeight - windowHeight)) * 100;
    document.querySelector('.progress-bar').style.width = progress + '%';
    
    // Sticky header
    const header = document.querySelector('header');
    if (scrollY > 100) {
        header.classList.add('sticky');
    } else {
        header.classList.remove('sticky');
    }
    
    // Lazy load images
    lazyLoadImages();
    
    // Parallax effects
    handleParallax(scrollY);
});

// Optimized scroll dengan requestAnimationFrame
let ticking = false;
window.addEventListener('scroll', function() {
    if (!ticking) {
        requestAnimationFrame(function() {
            handleScroll();
            ticking = false;
        });
        ticking = true;
    }
});

5. Touch Events – Untuk Perangkat Touchscreen

Event khusus untuk smartphone dan tablet.

touchstart, touchmove, touchend

const touchElement = document.querySelector('.swipe-area');
let startX, startY, endX, endY;

touchElement.addEventListener('touchstart', function(event) {
    startX = event.touches[0].clientX;
    startY = event.touches[0].clientY;
    event.preventDefault(); // Prevent default scroll behavior
});

touchElement.addEventListener('touchmove', function(event) {
    // Swipe detection
    endX = event.touches[0].clientX;
    endY = event.touches[0].clientY;
    
    const diffX = startX - endX;
    const diffY = startY - endY;
    
    // Horizontal swipe
    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
        if (diffX > 0) {
            console.log('Swiped left');
            nextSlide();
        } else {
            console.log('Swiped right');
            previousSlide();
        }
    }
});

touchElement.addEventListener('touchend', function(event) {
    // Tap detection
    if (startX === endX && startY === endY) {
        handleTap();
    }
});

6. Media Events – Untuk Audio/Video Elements

Event untuk mengontrol media playback.

play, pause, ended

const video = document.getElementById('myVideo');

video.addEventListener('play', function() {
    console.log('Video started playing');
    document.querySelector('.play-button').style.display = 'none';
});

video.addEventListener('pause', function() {
    console.log('Video paused');
    document.querySelector('.play-button').style.display = 'block';
});

video.addEventListener('ended', function() {
    console.log('Video finished');
    showNextVideoButton();
    updateProgress(100);
});

video.addEventListener('timeupdate', function() {
    const progress = (this.currentTime / this.duration) * 100;
    updateProgress(progress);
});

// Custom video controls
function togglePlay() {
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
}

Event Propagation: Bubbling dan Capturing

Pahami bagaimana event menyebar melalui DOM tree.

Event Bubbling Example

<div class="grandparent">
    <div class="parent">
        <button class="child">Click Me!</button>
    </div>
</div>

<script>
document.querySelector('.child').addEventListener('click', function() {
    console.log('Child clicked');
});

document.querySelector('.parent').addEventListener('click', function() {
    console.log('Parent clicked');
});

document.querySelector('.grandparent').addEventListener('click', function() {
    console.log('Grandparent clicked');
});

// Output ketika button diklik:
// "Child clicked"
// "Parent clicked" 
// "Grandparent clicked"
</script>

Mengontrol Propagation dengan stopPropagation()

document.querySelector('.child').addEventListener('click', function(event) {
    console.log('Child clicked');
    event.stopPropagation(); // Stop event dari bubbling up
});

// Sekarang hanya "Child clicked" yang akan muncul

Event Delegation: Teknik Powerful untuk Dynamic Content

Event delegation memungkinkan handling events untuk element yang belum ada atau dynamic.

Contoh Event Delegation

// ❌ Tidak efisien untuk dynamic content
document.querySelectorAll('.delete-btn').forEach(button => {
    button.addEventListener('click', function() {
        deleteItem(this.dataset.id);
    });
});

// ✅ Event delegation yang efisien
document.querySelector('.item-list').addEventListener('click', function(event) {
    if (event.target.classList.contains('delete-btn')) {
        deleteItem(event.target.dataset.id);
    }
    
    if (event.target.classList.contains('edit-btn')) {
        editItem(event.target.dataset.id);
    }
});

// Contoh real: Todo list dengan dynamic items
document.getElementById('todo-form').addEventListener('submit', function(event) {
    event.preventDefault();
    const input = this.querySelector('input');
    const text = input.value.trim();
    
    if (text) {
        addTodoItem(text);
        input.value = '';
    }
});

// Event delegation untuk todo items
document.getElementById('todo-list').addEventListener('click', function(event) {
    const item = event.target.closest('.todo-item');
    if (!item) return;
    
    if (event.target.classList.contains('delete-btn')) {
        item.remove();
    }
    
    if (event.target.classList.contains('toggle-btn')) {
        item.classList.toggle('completed');
    }
    
    if (event.target.classList.contains('edit-btn')) {
        enableEditMode(item);
    }
});

Custom Events: Membuat Event Sendiri

Kita juga bisa membuat custom events untuk komunikasi yang lebih complex.

Membuat dan Memicu Custom Events

// Membuat custom event
const productAddedEvent = new CustomEvent('productAdded', {
    detail: {
        productId: 123,
        productName: 'Laptop',
        price: 15000000,
        timestamp: new Date()
    },
    bubbles: true,
    cancelable: true
});

// Listen untuk custom event
document.addEventListener('productAdded', function(event) {
    console.log('Product added:', event.detail);
    updateCartCounter();
    showNotification(`Added: ${event.detail.productName}`);
});

// Memicu custom event
function addToCart(productId, productName, price) {
    // Logic untuk menambah ke cart
    
    // Trigger custom event
    const event = new CustomEvent('productAdded', {
        detail: { productId, productName, price }
    });
    document.dispatchEvent(event);
}

Performance Optimization untuk Event Handling

Event handling yang tidak optimal bisa menyebabkan performance issues.

1. Debouncing untuk Frequent Events

function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Gunakan debouncing untuk resize dan scroll events
window.addEventListener('resize', debounce(function() {
    console.log('Window resized (debounced)');
    handleLayoutChange();
}, 250));

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function(event) {
    performSearch(event.target.value);
}, 300));

2. Throttling untuk Event yang Sangat Frequent

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// Gunakan throttling untuk mousemove dan scroll
document.addEventListener('mousemove', throttle(function(event) {
    updateCursorPosition(event.clientX, event.clientY);
}, 16)); // ~60fps

3. Cleanup Event Listeners

// Simpan reference untuk bisa di-remove later
const button = document.getElementById('myButton');
const clickHandler = function() {
    console.log('Button clicked');
};

button.addEventListener('click', clickHandler);

// Ketika tidak diperlukan lagi
button.removeEventListener('click', clickHandler);

// Untuk component-based frameworks
class MyComponent {
    constructor() {
        this.handleResize = this.handleResize.bind(this);
        window.addEventListener('resize', this.handleResize);
    }
    
    handleResize() {
        // Handle resize
    }
    
    destroy() {
        window.removeEventListener('resize', this.handleResize);
    }
}

Best Practices Event Handling

1. Gunakan Event Delegation

Untuk dynamic content, gunakan event delegation pada parent element.

2. Hindari Inline Event Handlers

// ❌ Jangan gunakan
<button onclick="handleClick()">Click</button>

// ✅ Gunakan addEventListener
button.addEventListener('click', handleClick);

3. Gunakan Passive Event Listeners untuk Performance

// Optimized untuk scroll dan touch events
document.addEventListener('touchstart', function(event) {
    // Handler tanpa preventDefault()
}, { passive: true });

window.addEventListener('scroll', function(event) {
    // Smooth scrolling performance
}, { passive: true });

Kesimpulan: Event Handling adalah Jiwa Interaktivitas Website

Menguasai jenis event JavaScript dan event handling yang efektif adalah kunci untuk membuat website yang truly interactive dan user-friendly. Dengan memahami berbagai jenis event dan bagaimana mengoptimalkan penggunaannya, kamu bisa:

  • Membuat user experience yang smooth dan responsive
  • Mengoptimalkan performance aplikasi web
  • Membangun interaksi complex yang engaging
  • Menangani berbagai jenis input device dengan graceful

Practice dengan contoh-contoh di atas, experiment dengan kombinasi events yang berbeda, dan selalu test di berbagai devices dan browsers. Happy coding!