خلاصه رویدادهای مهم
رویداد
توضیح
مثال کاربرد
click
کلیک موس
دکمه‌ها، لینک‌ها
input
تایپ کردن در اینپوت
جستجو، فرم‌ها
change
تغییر مقدار (بعد از خروج از اینپوت)
لیست‌های کشویی
keydown / keyup
فشار دادن دکمه کیبورد
میانبرها، Enter
mouseover
ورود موس به المان
منوها، افکت‌ها
mouseout
خروج موس از المان
باز شدن منو
load
بارگذاری صفحه
خوش‌آمدگویی اولیه
eitaa.com/Pythonfriend
16.7M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت اول
eitaa.com/Pythonfriend
19.6M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت دوم
eitaa.com/Pythonfriend
20.9M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت سوم
eitaa.com/Pythonfriend
20.7M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت چهارم
eitaa.com/Pythonfriend
19.6M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت پنجم
eitaa.com/Pythonfriend
19.1M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت ششم
eitaa.com/Pythonfriend
15.3M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت هفتم
eitaa.com/Pythonfriend
15.8M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت هشتم
eitaa.com/Pythonfriend
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>جلسه یازدهم - رویدادها</title>
<style>
body { font-family: Tahoma; padding: 20px; text-align: center; }
.container { margin-top: 50px; }
button {
padding: 10px 20px;
font-size: 18px;
margin: 10px;
cursor: pointer;
}
#counter {
font-size: 40px;
font-weight: bold;
color: #333;
}
.box {
width: 200px;
height: 100px;
background: #ddd;
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
transition: all 0.3s;
}
</style>
</head>
<body>
<div class="container">
<h1>🖱️ تست رویدادها</h1>
<!-- شمارنده -->
<div id="counter">0</div>
<button id="incrementBtn">افزایش (+1)</button>
<button id="resetBtn">ریست (0)</button>
<hr>
<!-- باکس هاور -->
<div class="box" id="hoverBox">موس رو بیار روش!</div>
</div>
<script>
// ۱. رویداد شمارنده
let count = 0;
let counterDisplay = document.getElementById("counter");
let incBtn = document.getElementById("incrementBtn");
let resetBtn = document.getElementById("resetBtn");
incBtn.addEventListener("click", function() {
count++;
counterDisplay.textContent = count;
// تغییر رنگ بر اساس عدد
if (count > 10) {
counterDisplay.style.color = "red";
} else {
counterDisplay.style.color = "#333";
}
});
resetBtn.addEventListener("click", function() {
count = 0;
counterDisplay.textContent = count;
counterDisplay.style.color = "#333";
});
// ۲. رویداد هاور (Mouse Over/Out)
let box = document.getElementById("hoverBox");
box.addEventListener("mouseover", function() {
box.style.backgroundColor = "#4CAF50";
box.style.color = "white";
box.style.transform = "scale(1.1)"; // بزرگ شدن کمی
});
box.addEventListener("mouseout", function() {
box.style.backgroundColor = "#ddd";
box.style.color = "#333";
box.style.transform = "scale(1)";
});
// ۳. رویداد کلیک روی کل صفحه
document.addEventListener("click", function(e) {
console.log("کلیک در صفحه: " + e.target.tagName);
});
</script>
</body>
</html>
کد نهایی جلسه یازدهم برای تمرین
eitaa.com/Pythonfriend
18.5M حجم رسانه بالاست
مشاهده در ایتا
جلسه دوازدهم قسمت اول
eitaa.com/Pythonfriend