DOM رویدادها (DOM Events)
«رویداد (Event)» یعنی اتفاقی در صفحه؛ مثل کلیک یا تایپ. با رویدادها، کد ما واکنش نشان می دهد؛ مثل وقتی دکمه بازی را می زنی و کاراکتر می پرد.
اجرای کد با کلیک
وقتی کاربر روی یک عنصر کلیک می کند، می توانیم کدی اجرا کنیم. «مدیر رویداد (Event Handler)» همان تابع واکنش است.
const title = document.getElementById("title");
title.onclick = function () {
title.innerHTML = "Ooops!";
};
فراخوانی تابع از رویداد
می توانیم تابعی جدا بسازیم و از رویداد صدا بزنیم. این کار کد را تمیز نگه می دارد.
function changeText(el) {
el.innerHTML = "Ooops!";
}
const h1 = document.getElementById("myHeading");
h1.onclick = function () {
changeText(h1);
};
نسبت دادن رویداد با DOM
می توانیم رویداد را با جاوااسکریپت به عنصر نسبت دهیم. این روش از HTML جداست و مدیریت پذیرتر است.
function displayDate() {
const now = new Date();
console.log(now);
}
const btn = document.getElementById("myBtn");
btn.onclick = displayDate;
روی ورودی: oninput و onchange
با «oninput» هر لحظه تایپ واکنش می دهیم. با «onchange» بعد از تغییر نهایی واکنش می دهیم.
function upperCase() {
const x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
const inp = document.getElementById("fname");
inp.oninput = upperCase;
رویدادهای ماوس: mousedown و mouseup
کلیک سه بخش دارد: پایین گرفتن، رهاکردن، و کلیک کامل. می توانیم هر بخش را جدا هندل کنیم.
function mDown(box) {
box.style.backgroundColor = "#1ec5e5";
box.innerHTML = "Release Me";
}
function mUp(box) {
box.style.backgroundColor = "#D94A38";
box.innerHTML = "Thank You";
}
const box = document.getElementById("box");
box.onmousedown = function () {
mDown(box);
};
box.onmouseup = function () {
mUp(box);
};
گام های عملی
- عنصر هدف را با
getElementByIdبگیر. - تابع واکنش را ساده و کوتاه بنویس.
- رویداد مناسب را تنظیم کن و نتیجه را تست کن.
نکته: برای بهینه سازی، فقط رویدادهای لازم را ست کن. رویدادهای زیاد، کندی می آورند.
لینک های مرتبط
- رویدادهای DOM؛ صفحه راهنمای همین بخش.
- انیمیشن های DOM؛ حرکت نرم بعد از رویداد.
- Event Listener؛ روش پیشرفته تر و تمیزتر.
جمع بندی سریع
- رویداد یعنی اتفاق در صفحه.
- تابع واکنش را کوتاه نگه دار.
- oninput زنده است؛ onchange بعد از تغییر.
- mousedown و mouseup بخش های کلیک اند.