رویدادهای HTML (HTML Events)
رویداد (Event) یعنی «اتفاق» در صفحه. مثلا کلیک یا تایپ. با جاوااسکریپت به این اتفاق ها واکنش می دهیم. مثل زنگ کلاس که شروع درس را اعلام می کند.
رویدادهای ورودی: Input Events
وقتی کاربر از یک فیلد بیرون می رود، رویداد «blur» رخ می دهد. می توانی مقدار را بررسی کنی.
const inp = document.getElementById("name");
inp.addEventListener("blur", function () {
console.log("left input:", inp.value);
});
وقتی مقدار یک لیست تغییر می کند، «change» اجرا می شود. گزینه انتخابی را بخوان.
const sel = document.getElementById("grade");
sel.addEventListener("change", function () {
console.log("selected:", sel.value);
});
وقتی فیلد فوکوس می گیرد، «focus» رخ می دهد. ظاهرش را تغییر بده.
const email = document.getElementById("email");
email.addEventListener("focus", function () {
email.style.backgroundColor = "#fff3cd";
});
رویدادهای ماوس: Mouse Events
عبور ماوس «mouseover» است و خروج «mouseout». می توانی متن را عوض کنی.
const box = document.getElementById("box");
box.addEventListener("mouseover", function () {
box.textContent = "Mouse in";
});
box.addEventListener("mouseout", function () {
box.textContent = "Mouse out";
});
«mousedown» هنگام پایین گرفتن دکمه ماوس رخ می دهد. «mouseup» هنگام رهاکردن.
const btn = document.getElementById("mBtn");
btn.addEventListener("mousedown", function () {
console.log("hold down");
});
btn.addEventListener("mouseup", function () {
console.log("released");
});
رویدادهای کلیک: Click Events
وقتی روی دکمه کلیک می کنی، «click» اجرا می شود. پیام نشان بده.
const c = document.getElementById("cBtn");
c.addEventListener("click", function () {
alert("clicked");
});
دوبار کلیک «dblclick» است. می توانی متن را بزرگ تر کنی.
const txt = document.getElementById("para");
txt.addEventListener("dblclick", function () {
txt.style.fontSize = "20px";
});
رویدادهای بارگذاری: Load Events
وقتی صفحه کامل می شود، «load» رخ می دهد. سپس کدهای شروع را اجرا کن.
window.addEventListener("load", function () {
console.log("page ready");
});
وقتی تصویر بارگذاری می شود، «load» تصویر اجرا می شود. سپس اندازه را بخوان.
const im = document.getElementById("photo");
im.addEventListener("load", function () {
console.log(im.naturalWidth);
});
سایر رویدادها: Others
کد کلید را با «keydown» بگیر. سپس شماره کلید را چاپ کن.
document.addEventListener("keydown", function (e) {
console.log("key:", e.keyCode);
});
مختصات نشانگر را با «mousemove» بخوان. این برای بازی ها مفید است.
document.addEventListener("mousemove", function (e) {
console.log(e.clientX, e.clientY);
});
گام های تمرین سریع
- یک عنصر با id بساز.
- عنصر را با query انتخاب کن.
- رویداد مناسب را گوش بده.
نکته: از addEventListener استفاده کن. چون تمیزتر و قابل گسترش است.
جمع بندی سریع
- رویداد یعنی یک اتفاق.
- ورودی ها blur و change دارند.
- ماوس hover و click دارد.
- صفحه و تصویر load دارند.
- کلیدها keydown و keyup دارند.