Events & Interactivity

What Are Events?

Events are things that happen in the browser: user clicks, types, scrolls, pages load, etc. JavaScript can listen for these events and respond to them.

Common events:

• click - User clicks an element
• input - User types in an input field
• change - Input value changes
• submit - Form is submitted
• load - Page or image finishes loading
• keydown / keyup - Keyboard keys
• mousemove - Mouse moves

Adding Event Listeners

// Basic event listener
const button = document.getElementById("playBtn");
button.addEventListener("click", function() {
    console.log("Button clicked!");
});

// Arrow function (modern)
button.addEventListener("click", () => {
    console.log("Button clicked!");
});

// Event object contains information
button.addEventListener("click", (event) => {
    console.log("Clicked at:", event.clientX, event.clientY);
    console.log("Target:", event.target);
});

// Multiple listeners
button.addEventListener("mouseenter", () => {
    button.style.backgroundColor = "blue";
});
button.addEventListener("mouseleave", () => {
    button.style.backgroundColor = "";
});

Form Events

// Input field
const searchInput = document.getElementById("search");
searchInput.addEventListener("input", (e) => {
    const query = e.target.value;
    filterTracks(query);
});

// File input
const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", (e) => {
    const files = e.target.files;
    for (let file of files) {
        handleFile(file);
    }
});

// Form submission
const form = document.getElementById("settingsForm");
form.addEventListener("submit", (e) => {
    e.preventDefault(); // Stop page reload
    saveSettings(form);
});

// Drag and drop
const dropZone = document.getElementById("dropZone");
dropZone.addEventListener("dragover", (e) => {
    e.preventDefault();
    dropZone.classList.add("drag-over");
});
dropZone.addEventListener("drop", (e) => {
    e.preventDefault();
    dropZone.classList.remove("drag-over");
    handleFiles(e.dataTransfer.files);
});

// File upload handling
uploadZone.addEventListener("drop", async (e) => {
    e.preventDefault();
    const files = Array.from(e.dataTransfer.files);
    
    for (const file of files) {
        if (file.type.startsWith("audio/")) {
            await analyzeAndAddTrack(file);
        }
    }
});

// Play button
playBtn.addEventListener("click", () => {
    if (isPlaying) {
        pausePlayback();
        playBtn.textContent = "▶ Play";
    } else {
        startPlayback();
        playBtn.textContent = "⏸ Pause";
    }
});

// Keyboard shortcuts
document.addEventListener("keydown", (e) => {
    if (e.code === "Space") {
        e.preventDefault();
        togglePlayback();
    }
    if (e.ctrlKey && e.code === "KeyE") {
        exportMix();
    }
});