درس ۱۷: رویدادها و تعامل

یادگیری مدیریت رویدادها و ایجاد تعامل کاربر

درس ۱۷ از ۲۰

پیشرفت درس

رویدادها چیستند؟

رویدادها (Events) اتفاقاتی هستند که در صفحه وب رخ می‌دهند و JavaScript می‌تواند به آن‌ها واکنش نشان دهد. این رویدادها می‌توانند توسط کاربر (مانند کلیک کردن) یا توسط مرورگر (مانند بارگذاری صفحه) ایجاد شوند.

انواع رویدادهای رایج:

Mouse Events: click, dblclick, mousedown, mouseup, mouseover
Keyboard Events: keydown, keyup, keypress
Form Events: submit, change, input, focus, blur
Window Events: load, resize, scroll
Touch Events: touchstart, touchend, touchmove

اضافه کردن Event Listeners

روش addEventListener

بهترین روش برای مدیریت رویدادها:

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

button.addEventListener('click', function() {
    console.log('دکمه کلیک شد!');
});

// یا با Arrow Function
button.addEventListener('click', () => {
    console.log('دکمه کلیک شد!');
});

روش‌های دیگر

// روش inline (توصیه نمی‌شود)
// <button onclick="myFunction()">کلیک</button>

// روش property
button.onclick = function() {
    console.log('کلیک شد');
};

// مشکل: فقط یک listener می‌تواند داشته باشد

تمرین عملی: رویدادها و تعامل

در ادامه، انواع مختلف رویدادها و نحوه مدیریت آن‌ها را تمرین کنید:

ویرایشگر کد خط 1، ستون 1

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>رویدادها و تعامل</title>
    <style>
        body {
            font-family: 'Vazirmatn', sans-serif;
            direction: rtl;
            text-align: right;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: rgba(255,255,255,0.1);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }
        .demo-section {
            background: rgba(255,255,255,0.1);
            padding: 20px;
            margin: 20px 0;
            border-radius: 10px;
            border-right: 4px solid #4CAF50;
        }
        .event-log {
            background: rgba(0,0,0,0.3);
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            font-family: monospace;
            direction: ltr;
            text-align: left;
            max-height: 200px;
            overflow-y: auto;
        }
        button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            font-family: 'Vazirmatn', sans-serif;
            transition: all 0.3s ease;
        }
        button:hover {
            background: #45a049;
            transform: translateY(-2px);
        }
        .interactive-box {
            width: 150px;
            height: 150px;
            background: #FF6B6B;
            margin: 10px;
            border-radius: 10px;
            display: inline-block;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            user-select: none;
        }
        .draggable {
            position: absolute;
            cursor: move;
        }
        .drop-zone {
            width: 200px;
            height: 200px;
            border: 3px dashed #4CAF50;
            border-radius: 10px;
            display: inline-block;
            margin: 10px;
            text-align: center;
            line-height: 200px;
            background: rgba(76, 175, 80, 0.1);
        }
        .drop-zone.dragover {
            background: rgba(76, 175, 80, 0.3);
            border-color: #2E7D32;
        }
        input, textarea {
            padding: 10px;
            border: none;
            border-radius: 5px;
            margin: 5px;
            font-family: 'Vazirmatn', sans-serif;
            width: 200px;
        }
        .game-area {
            background: rgba(0,0,0,0.2);
            padding: 20px;
            border-radius: 10px;
            margin: 10px 0;
            position: relative;
            height: 300px;
            overflow: hidden;
        }
        .ball {
            width: 30px;
            height: 30px;
            background: #FFD700;
            border-radius: 50%;
            position: absolute;
            transition: all 0.1s ease;
        }
        .score {
            font-size: 24px;
            font-weight: bold;
            color: #FFD700;
            text-align: center;
        }
        .key-display {
            background: rgba(255,255,255,0.2);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            font-size: 18px;
            min-height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🖱️ رویدادها و تعامل JavaScript</h1>
        
        <div class="demo-section">
            <h2>رویدادهای موس</h2>
            <div class="interactive-box" id="mouseBox">
                کلیک کنید!
            </div>
            <div class="interactive-box" id="hoverBox" style="background: #4ECDC4;">
                موس را روی من بکشید!
            </div>
            <button onclick="clearLog()">پاک کردن لاگ</button>
            <div class="event-log" id="mouseLog">رویدادهای موس اینجا نمایش داده می‌شوند...</div>
        </div>
        
        <div class="demo-section">
            <h2>رویدادهای کیبورد</h2>
            <input type="text" id="keyInput" placeholder="تایپ کنید...">
            <div class="key-display" id="keyDisplay">کلیدی فشرده نشده</div>
            <div class="event-log" id="keyLog">رویدادهای کیبورد اینجا نمایش داده می‌شوند...</div>
        </div>
        
        <div class="demo-section">
            <h2>رویدادهای فرم</h2>
            <form id="demoForm">
                <input type="text" id="nameField" placeholder="نام" required>
                <input type="email" id="emailField" placeholder="ایمیل" required>
                <textarea id="messageField" placeholder="پیام" rows="3">

رویدادهای فرم اینجا نمایش داده می‌شوند...

Drag and Drop

مرا بکشید!

اینجا رها کنید

رویدادهای Drag & Drop اینجا نمایش داده می‌شوند...

بازی ساده - حرکت توپ

امتیاز: 0

از کلیدهای جهت‌دار برای حرکت توپ استفاده کنید. با کلیک روی توپ امتیاز کسب کنید!

رویدادهای پنجره

رویدادهای پنجره اینجا نمایش داده می‌شوند...

/* استایل‌های اضافی برای رویدادها */
.event-active {
    animation: eventPulse 0.5s ease-in-out;
    border: 3px solid #FFD700;
}

@keyframes eventPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.clicked {
    background: #E74C3C !important;
    transform: scale(0.95);
}

.hovered {
    background: #F39C12 !important;
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.typing {
    border: 2px solid #3498DB;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}

.form-valid {
    border-color: #27AE60;
    background: rgba(39, 174, 96, 0.1);
}

.form-invalid {
    border-color: #E74C3C;
    background: rgba(231, 76, 60, 0.1);
}

.dragging {
    opacity: 0.7;
    transform: rotate(5deg);
}

.game-over {
    animation: gameOverShake 0.5s ease-in-out;
}

@keyframes gameOverShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.success-message {
    background: rgba(39, 174, 96, 0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

// متغیرهای سراسری
let score = 0;
let ballPosition = { x: 50, y: 50 };
let gameActive = true;

// تابع کمکی برای لاگ کردن رویدادها
function logEvent(logId, message) {
    const log = document.getElementById(logId);
    const timestamp = new Date().toLocaleTimeString('fa-IR');
    log.innerHTML += `[${timestamp}] ${message}\n`;
    log.scrollTop = log.scrollHeight;
}

function clearLog() {
    document.getElementById('mouseLog').innerHTML = '';
}

// رویدادهای موس
document.addEventListener('DOMContentLoaded', function() {
    const mouseBox = document.getElementById('mouseBox');
    const hoverBox = document.getElementById('hoverBox');
    
    // رویدادهای کلیک
    mouseBox.addEventListener('click', function(e) {
        logEvent('mouseLog', `کلیک در موقعیت: (${e.offsetX}, ${e.offsetY})`);
        this.classList.add('clicked');
        setTimeout(() => this.classList.remove('clicked'), 200);
    });
    
    mouseBox.addEventListener('dblclick', function() {
        logEvent('mouseLog', 'دابل کلیک انجام شد');
        this.style.background = '#' + Math.floor(Math.random()*16777215).toString(16);
    });
    
    // رویدادهای hover
    hoverBox.addEventListener('mouseenter', function() {
        logEvent('mouseLog', 'موس وارد جعبه شد');
        this.classList.add('hovered');
    });
    
    hoverBox.addEventListener('mouseleave', function() {
        logEvent('mouseLog', 'موس از جعبه خارج شد');
        this.classList.remove('hovered');
    });
    
    hoverBox.addEventListener('mousemove', function(e) {
        const rect = this.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        this.style.background = `radial-gradient(circle at ${x}px ${y}px, #FFD700, #4ECDC4)`;
    });
});

// رویدادهای کیبورد
document.addEventListener('DOMContentLoaded', function() {
    const keyInput = document.getElementById('keyInput');
    const keyDisplay = document.getElementById('keyDisplay');
    
    keyInput.addEventListener('keydown', function(e) {
        logEvent('keyLog', `کلید فشرده شد: ${e.key} (کد: ${e.keyCode})`);
        keyDisplay.textContent = `کلید فشرده شده: ${e.key}`;
        keyDisplay.style.background = 'rgba(52, 152, 219, 0.3)';
    });
    
    keyInput.addEventListener('keyup', function(e) {
        logEvent('keyLog', `کلید رها شد: ${e.key}`);
        keyDisplay.style.background = 'rgba(255,255,255,0.2)';
    });
    
    keyInput.addEventListener('input', function(e) {
        logEvent('keyLog', `متن تغییر کرد: "${e.target.value}"`);
        this.classList.add('typing');
        setTimeout(() => this.classList.remove('typing'), 300);
    });
});

// رویدادهای فرم
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('demoForm');
    const nameField = document.getElementById('nameField');
    const emailField = document.getElementById('emailField');
    const messageField = document.getElementById('messageField');
    
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        logEvent('formLog', 'فرم ارسال شد');
        
        const formData = new FormData(this);
        const data = {
            name: nameField.value,
            email: emailField.value,
            message: messageField.value
        };
        
        logEvent('formLog', `داده‌ها: ${JSON.stringify(data, null, 2)}`);
        
        // نمایش پیام موفقیت
        const successMsg = document.createElement('div');
        successMsg.className = 'success-message';
        successMsg.textContent = 'فرم با موفقیت ارسال شد!';
        form.appendChild(successMsg);
        
        setTimeout(() => successMsg.remove(), 3000);
    });
    
    form.addEventListener('reset', function() {
        logEvent('formLog', 'فرم بازنشانی شد');
    });
    
    // اعتبارسنجی زنده
    [nameField, emailField, messageField].forEach(field => {
        field.addEventListener('blur', function() {
            if (this.checkValidity()) {
                this.classList.add('form-valid');
                this.classList.remove('form-invalid');
                logEvent('formLog', `فیلد ${this.placeholder} معتبر است`);
            } else {
                this.classList.add('form-invalid');
                this.classList.remove('form-valid');
                logEvent('formLog', `فیلد ${this.placeholder} نامعتبر است`);
            }
        });
        
        field.addEventListener('focus', function() {
            logEvent('formLog', `فوکوس روی فیلد ${this.placeholder}`);
        });
    });
});

// Drag and Drop
document.addEventListener('DOMContentLoaded', function() {
    const dragBox = document.getElementById('dragBox');
    const dropZone = document.getElementById('dropZone');
    
    dragBox.addEventListener('dragstart', function(e) {
        logEvent('dragLog', 'شروع کشیدن');
        this.classList.add('dragging');
        e.dataTransfer.setData('text/plain', 'dragBox');
    });
    
    dragBox.addEventListener('dragend', function() {
        logEvent('dragLog', 'پایان کشیدن');
        this.classList.remove('dragging');
    });
    
    dropZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('dragover');
    });
    
    dropZone.addEventListener('dragleave', function() {
        this.classList.remove('dragover');
    });
    
    dropZone.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('dragover');
        logEvent('dragLog', 'عنصر رها شد');
        
        const data = e.dataTransfer.getData('text/plain');
        if (data === 'dragBox') {
            this.textContent = 'موفق! 🎉';
            this.style.background = 'rgba(39, 174, 96, 0.3)';
            
            setTimeout(() => {
                this.textContent = 'اینجا رها کنید';
                this.style.background = 'rgba(76, 175, 80, 0.1)';
            }, 2000);
        }
    });
});

// بازی توپ
document.addEventListener('DOMContentLoaded', function() {
    const ball = document.getElementById('ball');
    const gameArea = document.getElementById('gameArea');
    const scoreElement = document.getElementById('score');
    
    // موقعیت اولیه توپ
    updateBallPosition();
    
    function updateBallPosition() {
        ball.style.left = ballPosition.x + 'px';
        ball.style.top = ballPosition.y + 'px';
    }
    
    // کنترل با کیبورد
    document.addEventListener('keydown', function(e) {
        if (!gameActive) return;
        
        const step = 10;
        const gameRect = gameArea.getBoundingClientRect();
        const maxX = gameArea.offsetWidth - ball.offsetWidth;
        const maxY = gameArea.offsetHeight - ball.offsetHeight;
        
        switch(e.key) {
            case 'ArrowUp':
                ballPosition.y = Math.max(0, ballPosition.y - step);
                break;
            case 'ArrowDown':
                ballPosition.y = Math.min(maxY, ballPosition.y + step);
                break;
            case 'ArrowLeft':
                ballPosition.x = Math.max(0, ballPosition.x - step);
                break;
            case 'ArrowRight':
                ballPosition.x = Math.min(maxX, ballPosition.x + step);
                break;
        }
        
        updateBallPosition();
    });
    
    // کلیک روی توپ برای امتیاز
    ball.addEventListener('click', function() {
        score++;
        scoreElement.textContent = score;
        
        // انیمیشن امتیاز
        this.style.background = '#E74C3C';
        this.style.transform = 'scale(1.5)';
        
        setTimeout(() => {
            this.style.background = '#FFD700';
            this.style.transform = 'scale(1)';
        }, 200);
        
        // موقعیت تصادفی جدید
        ballPosition.x = Math.random() * (gameArea.offsetWidth - ball.offsetWidth);
        ballPosition.y = Math.random() * (gameArea.offsetHeight - ball.offsetHeight);
        updateBallPosition();
    });
});

// رویدادهای پنجره
function testWindowEvents() {
    logEvent('windowLog', 'تست رویدادهای پنجره شروع شد');
    
    // رویداد resize
    const originalResize = window.onresize;
    window.onresize = function() {
        logEvent('windowLog', `اندازه پنجره تغییر کرد: ${window.innerWidth}x${window.innerHeight}`);
        if (originalResize) originalResize();
    };
    
    // رویداد scroll
    const originalScroll = window.onscroll;
    window.onscroll = function() {
        logEvent('windowLog', `اسکرول: ${window.pageYOffset}px`);
        if (originalScroll) originalScroll();
    };
    
    logEvent('windowLog', 'Event listeners اضافه شدند. پنجره را resize کنید یا اسکرول کنید');
}

// رویدادهای اولیه
document.addEventListener('DOMContentLoaded', function() {
    console.log('صفحه رویدادها و تعامل آماده است!');
    logEvent('windowLog', 'صفحه بارگذاری شد');
});

window.addEventListener('beforeunload', function(e) {
    e.returnValue = 'آیا مطمئن هستید که می‌خواهید صفحه را ترک کنید؟';
});

نمایش زنده

آموزش توسعه وب

درس ۱۷: رویدادها و تعامل

رویدادها چیستند؟

انواع رویدادهای رایج:

اضافه کردن Event Listeners

روش addEventListener

روش‌های دیگر

تمرین عملی: رویدادها و تعامل

Drag and Drop

بازی ساده - حرکت توپ

رویدادهای پنجره

Event Object

ویژگی‌های مهم Event Object

متدهای مهم Event Object

Event Delegation

مزایای Event Delegation

رویدادهای مختلف

رویدادهای موس

رویدادهای کیبورد

رویدادهای فرم

رویدادهای Touch (لمسی)

Custom Events

بهترین شیوه‌ها

💡 نکات مهم:

مثال Debouncing

حذف Event Listeners

آزمون درس ۱۷

سوال ۱: کدام متد برای اضافه کردن Event Listener توصیه می‌شود؟

سوال ۲: کدام متد برای جلوگیری از رفتار پیش‌فرض استفاده می‌شود؟

سوال ۳: Event Delegation چه مزیتی دارد؟