یک رویداد چیست؟
تعامل جاوااسکریپت با HTML از طریق رویدادها (Events) انجام می‌شود که زمانی وقوع می‌یابد که کاربر یا مرورگر یک صفحه را تغییر می‌دهد.
وقتی صفحه بارگیری می‌شود، آن را یک رویداد (Event) می‌نامند. وقتی کاربر بر روی یک دکمه کلیک می‌کند، آن کلیک همچنین یک رویداد است. مثال‌های دیگر رویدادها شامل فشردن هر کلید، بستن یک پنجره، تغییر اندازه یک پنجره، و غیره می‌شود.
توسعه‌دهندگان می‌توانند از این رویدادها برای اجرای واکنش‌های کد شده جاوااسکریپت استفاده کنند که باعث بستن دکمه‌ها، نمایش پیام به کاربران، اعتبارسنجی داده‌ها، و تقریباً هر نوع واکنش دیگری که تصور می‌شود، می‌شود.
رویدادها بخشی از مدل شیء سند (DOM) سطح 3 هستند و هر عنصر HTML شامل مجموعه‌ای از رویدادها است که می‌توانند کد جاوااسکریپت را به کار اندازند.
لطفاً این آموزش کوچک را برای درک بهتر مراجعه کنید: مرجع رویداد HTML.
Event Handler ها
Event Handler ها می‌تواند به عنوان یک ویژگی از عنصر اچ‌تی‌ام‌ال استفاده شود. این ویژگی کد جاوااسکریپت درون خطی یا اجرای تابع به عنوان یک مقدار را می‌پذیرد.
هر زمان که هر رویدادی را فعال کند، کد جاوااسکریپت درون خطی را فراخوانی می‌کند یا تابع بازخوانی را اجرا می‌کند تا عمل خاصی را انجام دهد.
به اصطلاح ساده، برای کنترل رویدادها استفاده می‌شود.
سینتکس
<div eventHandler = "JavaScript_code"> </div>مثال : Inline JavaScript با Event Handler ها
<html>
<body>
<h2>برای تغییر رنگ متن دکمه، بر روی آن کلیک کنید</h2>
<button onclick="this.style.color='red'"> کلیک کنید </button>
<div id="output"> </div>
</body>
</html>مثال: Function با Event Handler ها
<html>
<head>
<style>
#test {
width: 600px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="test"> </div> <br>
<button onclick="handleClick()"> تغییر رنگ Div </button>
<script>
function handleClick(event) {
var div = document.getElementById("test");
div.style.backgroundColor = "blue";
}
</script>
</body>
</html>مثال: Multiple Functions با Event Handler ها
<html>
<head>
<style>
#test {
font-size: 15px;
}
</style>
</head>
<body>
<h2>برای سفارشی‌سازی فونت روی متن زیر موس را حرکت دهید.</h2>
<div id="test" onmouseenter="changeFontSize(); changeColor();"> Hello World! </div> <br>
<script>
function changeFontSize(event) {
document.getElementById("test").style.fontSize = "25px";
}
function changeColor(event) {
document.getElementById("test").style.color = "red";
}
</script>
</body>
</html>Event Object ها
تابعی که رویداد را پردازش می‌کند، شیء ‘event’ را به عنوان پارامتر دریافت می‌کند. شیء ‘event’ شامل اطلاعات مربوط به رویداد و عنصری است که روی آن رویداد رخ داده است.
همچنین ویژگی‌ها و متدهای مختلفی نیز وجود دارند که می‌توانید از آن‌ها با شیء رویداد برای گرفتن اطلاعات استفاده کنید.
در زیر فهرستی از انواع مختلف شیء رویداد آمده است. هر شیء رویداد شامل رویدادها، متدها و ویژگی‌های مختلفی است.
شیء/نوع مدیریت
AnimationEvent با انیمیشن‌های CSS سر و کار دارد.
ClipboardEvent تغییرات کلیپ‌بورد را پردازش می‌کند.
DragEvent رویدادهای کشیدن و رها سازی را پردازش می‌کند.
FocusEvent برای مدیریت رویدادهای فوکوس استفاده می‌شود.
HashChangeEvent تغییرات بخش انکر آدرس URL را پردازش می‌کند.
InputEvent برای مدیریت ورودی‌های فرم استفاده می‌شود.
KeyboardEvent برای مدیریت تعاملات صفحه‌کلید توسط کاربران استفاده می‌شود.
MediaEvent رویدادهای مرتبط با رسانه را پردازش می‌کند.
MouseEvent برای مدیریت تعاملات موس توسط کاربران استفاده می‌شود.
PageTransitionEvent برای مدیریت ناوبری بین صفحات وب استفاده می‌شود.
PopStateEvent تغییرات در تاریخچه صفحه را پردازش می‌کند.
ProgressEvent برای مدیریت پیشرفت بارگیری فایل استفاده می‌شود.
StorageEvent تغییرات در ذخیره سازی وب را پردازش می‌کند.
TouchEvent برای مدیریت تعامل لمسی روی صفحه دستگاه استفاده می‌شود.
TransitionEvent برای مدیریت انتقال CSS استفاده می‌شود.
UiEvent برای مدیریت تعامل رابط کاربری توسط کاربران استفاده می‌شود.
WheelEvent برای مدیریت تعامل چرخ‌دنده موس توسط کاربران استفاده می‌شود.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام