کلیه رویدادهای JavaScript
کلیه رویدادهای مدل DOM در HTML
تصور کنید بخواهیم به ازای کلیک کردن کاربر روی یک عنصر، کار مشخصی انجام شود، به عملیات کلیک کردن "رویداد" گفته می شود. در HTML براحتی می توانیم، رویدادها را بعنوان یک ویژگی یا attribute به عناصر HTML اضافه کنیم. بطور معمول، رویدادها با یک تابع JavaScript تنظیم می شوند و زمانی که رویداد اتفاق افتاد، تابع JavaScript اجرا می شود.
نکته: کنسرسیوم W3C، استاندارد سازی مدل رویداد، را در DOM سطح 2 انجام داد.
رویدادهای مدل DOM در HTML
ستون DOM نشان می دهد که رویداد مورد نظر در کدام Level مدل DOM، معرفی شده است.
کلیه رویدادهای مربوط به موس
| رویداد | توضیحات | DOM |
|---|---|---|
| onclick |
این رویداد، زمانی که کاربر روی عنصر کلیک می کند، اتفاق می افتد. |
2 |
| oncontextmenu |
این رویداد، زمانی روی می دهد که، کاربر برای باز کردن منوی زمینه، روی یک عنصر راست کلیک می کند. |
3 |
| ondblclick |
این رویداد، زمانی روی می دهد که، کاربر روی یک عنصر دبل-کلیک کند . |
2 |
| onmousedown |
این رویداد، زمانی روی می دهد که، کاربر دکمه ی موس را روی یک عنصر فشار دهد. |
2 |
| onmouseenter |
این رویداد، زمانی روی می دهد که، کاربر نشانگر ماوس را به روی یک عنصر وارد کند. |
2 |
| onmouseleave |
این رویداد، زمانی روی می دهد که، نشانگر موس از روی یک عنصر خارج شود. |
2 |
| onmousemove |
این رویداد،زمانی روی می دهد که، اشاره گر موس بر روی یک عنصر، حرکت کند. |
2 |
| onmouseover |
این رویداد، زمانی روی می دهد که،کاربر اشاره گر ماوس را بر روی یک عنصر یا فرزندان آن عنصر وارد کند. |
2 |
| onmouseout |
این رویداد، زمانی روی می دهد که، کاربر اشاره گر ماوس را از روی یک عنصر یا فرزندان آن عنصر بیرون ببرد. |
2 |
| onmouseup |
این رویداد، زمانی روی می دهد که کاربر،دکمه ی ماوس را بر روی یک عنصر رها کند. |
2 |
کلیه رویدادهای مربوط به کیبورد (keyboard)
| رویداد | توضیحات | DOM |
|---|---|---|
| onkeydown |
این رویداد زمانی روی می دهد که، کاربر در حال فشار دادن یک دکمه است. |
2 |
| onkeypress |
این رویداد زمانی روی می دهد که، کاربر یک دکمه را فشار دهد. |
2 |
| onkeyup |
این رویداد زمانی روی می دهد که، کاربر یک دکمه را رها کند. |
2 |
Frame/Object Events
| رویداد | توضیحات | DOM |
|---|---|---|
| onabort |
این رویداد زمانی روی می دهد که، لود شدن یک منبع بی نتیجه باشد. |
2 |
| onbeforeunload |
این رویداد زمانی روی می دهد که، صفحه(document)می خواهد از بارگذاری خارج شود(بسته یا رفرش شود). |
2 |
| onerror |
این رویداد زمانی روی می دهد که، یک error به هنگام لود شدن یک فایل اکسترنال، به وجود بیاید. |
2 |
| onhashchange |
این رویداد زمانی روی می دهد که، تغییری در قسمت لنگری(anchor part) یک URL به وجود بیاید. |
3 |
| onload |
این رویداد زمانی روی می دهد که، یک شیء لود شود. (بارگزاری شود). |
2 |
| onpageshow |
این رویداد زمانی روی می دهد که، کاربر به یک صفحه وب هدایت شود(بعبارت دیگر: وارد شود). |
3 |
| onpagehide |
این رویداد زمانی روی می دهد که، کاربر از یک صفحه وب بیرون برود. |
3 |
| onresize |
این رویداد زمانی روی می دهد که، اندازه ی صفحه وب تغییر کند. |
2 |
| onscroll |
این رویداد زمانی روی می دهد که، اسکرول بار، حرکت داده شود(اسکرول شود). |
2 |
| onunload |
این رویداد زمانی روی می دهد که، کاربر بخواهد صفحه وب را از بارگذاری خارج کند.(صفحه را ببندد یا اینکه refresh کند). |
2 |
کلیه رویدادهای مربوط به فرم (form)
| رویداد | توضیحات | DOM |
|---|---|---|
| onblur |
این رویداد زمانی روی می دهد که، یک عنصر focus(فوکس) را از دست می دهد. |
2 |
| onchange |
این رویداد زمانی روی می دهد که، مقدار یک عنصر تغییر کند. این عنصر می تواند <input> یا <keygen> یا <textarea> باشد. |
2 |
| onfocus |
این رویداد زمانی روی می دهد که، یک عنصر focus(فوکس) را به دست آورد. |
2 |
| onfocusin |
این رویداد زمانی روی می دهد که، یک عنصر در آستانه ی گرفتن focus(فوکس)می باشد. |
2 |
| onfocusout |
این رویداد زمانی روی می دهد که، یک عنصر در آستانه ی از دست دادن focus(فوکس)می باشد. |
2 |
| oninput |
این رویداد زمانی روی می دهد که، یک عنصر ورودی را از کاربر دریافت می کند |
3 |
| oninvalid |
این رویداد زمانی روی می دهد که، یک عنصر نامعتبر است. |
3 |
| onreset |
این رویداد زمانی روی می دهد که، یک فرم reset شود. |
2 |
| onsearch |
این رویداد زمانی روی می دهد که، یک کاربر در فیلد search چیزی را بنویسد. |
3 |
| onselect |
این رویداد زمانی روی می دهد که، کاربر مقداری از یک متن را انتخاب کند(select کند). |
2 |
| onsubmit |
این رویداد زمانی روی می دهد که، یک فرم submit شود. |
2 |
کلیه رویدادهای مربوط به کشیدن عناصر (drag)
| رویداد | توضیحات | DOM |
|---|---|---|
| ondrag |
این رویداد زمانی روی می دهد که، یک عنصر در حال درگ شدن(کشیده شدن) است. |
3 |
| ondragend |
این رویداد زمانی روی می دهد که، کاربر درگ کردن(کشیده شدن) عنصر را پایان دهد. |
3 |
| ondragenter |
این رویداد زمانی روی می دهد که، عنصر درگ شده(کشیده شده) وارد منطقه رها شدن(drop)شود. |
3 |
| ondragleave |
این رویداد زمانی روی می دهد که، عنصر درگ شده(کشیده شده)، منطقه رها شدن(drop)را ترک می کند. |
3 |
| ondragover |
این رویداد زمانی روی می دهد که، عنصر درگ شده(کشیده شده)، بر روی منطقه رها شدن(drop) قرا بگیرد. |
3 |
| ondragstart |
این رویداد زمانی روی می دهد که، کاربر شروع به درگ کردن(کشیدن) یک عنصر می کند. |
3 |
| ondrop |
این رویداد زمانی روی می دهد که، عنصر درگ شده(کشیده شده)، بر روی منطقه رها شدن(drop)، رها می شود. |
3 |
کلیه رویدادهای مربوط به حافظه کلیپ بورد (Clipboard)
| رویداد | توضیحات | DOM |
|---|---|---|
| oncopy |
این رویداد زمانی روی می دهد که، کاربر محتوای یک عنصر را کپی می کند. |
|
| oncut |
این رویداد زمانی روی می دهد که، کاربر محتوای یک عنصر را cut می کند. |
|
| onpaste |
این رویداد زمانی روی می دهد که، یک کاربر محتوایی را در یک عنصر paste(الصاق) می کند. |
کلیه رویدادهای مربوط به پرینت (Print )
| رویداد | توضیحات | DOM |
|---|---|---|
| onafterprint |
این رویداد زمانی روی می دهد که، یک صفحه شروع به print می کند یا اینکه پنجره مربوط به print بسته می شود. |
3 |
| onbeforeprint |
این رویداد زمانی روی می دهد که، یک صفحه در آستانه ی پرینت شدن است. |
3 |
کلیه رویدادهای مربوط به مدیا (Media )
| رویداد | توضیحات | DOM |
|---|---|---|
| onabort |
این رویداد زمانی روی می دهد که لود شدن یک مدیا بی نتیجه باشد. |
3 |
| oncanplay |
این رویداد زمانی روی می دهد که، مرورگر بتواند نمایش مدیا را شروع کند. |
3 |
| oncanplaythrough |
این رویداد زمانی روی می دهد که، مرورگر بتواند بدون توقف برای لود کردن، مدیا را نمایش دهد. |
3 |
| ondurationchange |
این رویداد زمانی روی می دهد که، مدت یک مدیا تغییر کند. |
3 |
| onemptied |
این رویداد زمانی روی می دهد که به علت یک اتفاق بد، فایل مدیا ناگهان از دسترس خارج می شود. |
3 |
| onended |
این رویداد زمانی روی می دهد که، مدیا به پایان می رسد (قابل استفاده برای پیام اتمام مدیا). |
3 |
| onerror |
این رویداد زمانی روی می دهد که، یک error در طول لود شدن فایل مدیا رخ دهد. |
3 |
| onloadeddata |
این رویداد زمانی روی می دهد که، داده های مدیا، لود شده اند. |
3 |
| onloadedmetadata |
این رویداد زمانی روی می دهد که، داده های متا، لود شوند. |
3 |
| onloadstart |
این رویداد زمانی روی می دهد که، مرورگر شروع به جستجوی مدیای مورد نظر می کند. |
3 |
| onpause |
این رویداد زمانی روی می دهد که، مدیا متوقف شود، خواه توسط کاربر یا بصورت برنامه نویسی. |
3 |
| onplay |
این رویداد زمانی روی می دهد که، پخش مدیا شروع شود or is no longer paused |
3 |
| onplaying |
این رویداد زمانی روی می دهد که، مدیا بعد از متوقف شدن(pause) یا توقف برای دانلود ادامه(buffering)، شروع به پخش کند. |
3 |
| onprogress |
این رویداد زمانی روی می دهد که، مرورگر در پروسه ی گرفتن داده های مدیا می باشد(دانلود کردن مدیا). |
3 |
| onratechange |
این رویداد زمانی روی می دهد که، سرعت پخش مدیا تغییر کند. |
3 |
| onseeked |
این رویداد زمانی روی می دهد که، کاربر حرکت/پرش به یک مکان پخش جدید در مدیا را به پایان ببرد. |
3 |
| onseeking |
این رویداد زمانی روی می دهد که، کاربر حرکت/پرش به یک مکان پخش جدید در مدیا را شروع می کند. |
3 |
| onstalled |
این رویداد زمانی روی می دهد که، مرورگر در حال تلاش برای دریافت داده های مدیا می باشد اما این داده ها غیر قابل دسترس می باشند. |
3 |
| onsuspend |
این رویداد زمانی روی می دهد که، مرورگر به طور عمدی داده های مدیا را دریافت نمی کند. |
3 |
| ontimeupdate |
این رویداد زمانی روی می دهد که، مکان پخش تغییر کند(درست مانند زمانی که کاربر به سرعت مدیا را از نقطه ای به نقطه ی دیگر می برد) |
3 |
| onvolumechange |
این رویداد زمانی روی می دهد که، میزان صدای مدیا تغییر کند(همچنین هنگامی که صدا در حالت mute قرار دارد) |
3 |
| onwaiting |
این رویداد زمانی روی می دهد که، مدیا برای دانلود فریم بعدی متوقف شده است و در حالت(resume)قرار دارد. |
3 |
کلیه رویدادهای مربوط به متحرک سازی (Animation)
| رویداد | توضیحات | DOM |
|---|---|---|
| animationend |
این رویداد زمانی روی می دهد که، یک انیمیشن سی اس اس کامل شود. |
3 |
| animationiteration |
این رویداد زمانی روی می دهد که، یک انیمیشن سی اس اس تکرار شود. |
3 |
| animationstart |
این رویداد زمانی روی می دهد که، یک انیمیشن سی اس اس شروع شود. |
3 |
کلیه رویدادهای مربوط به انتقال (Transition)
| رویداد | توضیحات | DOM |
|---|---|---|
| transitionend |
این رویداد زمانی روی می دهد که یک transition در سی اس اس کامل شود. |
3 |
کلیه رویدادهای مربوط به سمت سرور (Server-Sent)
| رویداد | توضیحات | DOM |
|---|---|---|
| onerror |
این رویداد زمانی روی می دهد که یک error در منبع رویداد(event source) ایجاد شود. |
|
| onmessage |
این رویداد زمانی روی می دهدکه، یک پیام از منبع رویداد(event source)دریافت شود. |
|
| onopen |
این رویداد زمانی روی می دهد که، یک اتصال با منبع رویداد(event source) باز شود. |
Misc Events
| رویداد | توضیحات | DOM |
|---|---|---|
| onmessage | این رویداد زمانی روی می دهد که، یک پیام از منبع رویداد(event source) دریافت شود. | 3 |
| onmousewheel |
غیر قابل استفاده. به جای آن از رویداد onwheel استفاده کنید. |
|
| ononline |
این رویداد زمانی روی می دهد که، مرورگر شروع به کار در حالت آنلاین می کند. |
3 |
| onoffline |
این رویداد زمانی روی می دهد که، مرورگر شروع به کار در حالت آفلاین می کند. |
3 |
| onpopstate |
این رویداد زمانی روی می دهد که، تاریخچه ی(history) پنجره تغییر می کند. |
3 |
| onshow |
این رویداد زمانی روی می دهد که، یک عنصر <menu> بصورت منوی محتوا(context menu)، نشان داده شود. |
3 |
| onstorage |
این رویداد زمانی روی می دهد که، یک منطقه ی ذخیره سازی وب بروز رسانی شود. |
3 |
| ontoggle |
این رویداد زمانی روی می دهد که، یک کاربر عنصر <details> را باز کند یا ببندد. |
3 |
| onwheel |
این رویداد زمانی روی می دهد که، دکمه ی چرخان ماوس، بر روی یک عنصر به سمت بالا یا پایین بچرخد. |
3 |
Touch Events
| رویداد | توضیحات | DOM |
|---|---|---|
| ontouchcancel |
این رویداد زمانی روی می دهد که، لمس کردن صفحه قطع شود. |
|
| ontouchend |
این رویداد زمانی روی می دهد که، انگشت فرد از روی صفحه لمسی برداشته شود. |
|
| ontouchmove |
این رویداد زمانی روی می دهد که، انگشت فرد بر روی صفحه نمایش حرکت کند. |
|
| ontouchstart |
این رویداد زمانی روی می دهد که، انگشت فرد بر روی صفحه نمایش قرار بگیرد. |
مرجع کلیه رویدادهای JavaScript
Constants
| Constant | توضیحات | DOM |
|---|---|---|
| CAPTURING_PHASE |
رویداد کنونی در فاز capture قرار دارد(1). |
1 |
| AT_TARGET |
رویداد کنونی در فاز target قرار دارد(2). |
2 |
| BUBBLING_PHASE |
رویداد کنونی در فاز bubbling قرار دارد(3). |
3 |
Properties
| متد | توضیحات | DOM |
|---|---|---|
| bubbles |
این خصوصیت، مشخص می کند که آیا یک رویداد خاص، ویژگی bubbling را دارد یا نه. |
2 |
| cancelable |
این خصوصیت، مشخص می کند که آیا می توان از اقدام پیش فرض یک رویداد جلوگیری کرد یا نه. |
2 |
| currentTarget |
عنصری را برمی گرداند که شنونده رویداد در آن تعریف شده است. |
2 |
| defaultPrevented |
این خصوصیت، مشخص می کند که آیا متد ()preventDefault برای رویداد صدا شده است یا نه. |
3 |
| eventPhase |
این خصوصیت، مشخص می کند که، چه فازی از رویداد در حال حاضر در حال ارزیابی است. |
2 |
| isTrusted |
این خصوصیت، مشخص می کند که آیا یک رویداد معتبر است یا نه. |
3 |
| target |
این خصوصیت، عنصری که رویداد را به وجود آورده است، برمی گرداند. |
2 |
| timeStamp |
از این خصوصیت، برای برگرداندن زمانی که در آن، رویداد، ایجاد شده است(به میلی ثانیه)، استفاده می شود.. |
2 |
| type |
این خصوصیت، نام رویداد را برمی گرداند. |
2 |
| view |
این خصوصیت، یک ارجاع به شیء window را در جایی که رویداد اتفاق افتاده است، برمی گرداند. |
2 |
Methods
| متد | توضیحات | DOM |
|---|---|---|
| initEvent() |
نوع رویداد را مشخص می کند، خواه رویداد ویژگی bubble را داشته باشد یا نه و خواه رویداد قابل cancel شدن باشد یا نه. |
2 |
| preventDefault() |
رویداد را در صورتی که قابلیت cancel شدن داشته باشد، cancel می کند. این بدین معنی است که، اقدام پیش فرض متعلق به رویداد رخ نخواهد داد. |
2 |
| stopImmediatePropagation() |
از صدا شدن دیگر شنوندگان رویداد کنونی جلوگیری می کند. |
3 |
| stopPropagation() |
از انتشار بیشتر یک رویداد در طی اجرای رویداد(event flow)، جلوگیری می کند. |
2 |
Mouseمرجع کلیه رویدادهای JavaScript
| متد | توضیحات | DOM |
|---|---|---|
| altKey |
این خصوصیت، یک مقدار بولی را برمی گرداند که مشخص می کند که، آیا در هنگام کلیک کردن موس، کلید ALT فشار داده شده است یا نه. |
2 |
| button |
این خصوصیت، مشخص می کند که، هنگام اجرای یک رویداد موس، کدام دکمه ی موس فشار داده شده است. |
2 |
| buttons |
این خصوصیت، مشخص می کند که، هنگام اجرای یک رویداد موس، کدام دکمه های موس فشار داده شده اند. |
3 |
| clientX |
این خصوصیت، نسبت به پنجره ی کنونی، هنگامی که یک رویداد موس اجرا می شود، مختصات افقی(x) موس را برمی گرداند. |
2 |
| clientY |
این خصوصیت، نسبت به پنجره کنونی، هنگامی که یک رویداد موس اجرا می شود، مختصات عمودی(y) موس را برمی گرداند. |
2 |
| ctrlKey |
این خصوصیت یک مقدار بولی را برمی گرداند که مشخص می کند که، آیا در هنگام کلیک کردن موس، کلید CTRL فشار داده شده است یا نه. |
2 |
| detail |
این خصوصیت، یک عدد را برمی گرداند که مشخص می کند، که چند بار موس کلیک شده است. |
2 |
| metaKey |
این خصوصیت، مشخص می کند که آیا در هنگام اتفاق افتادن یک رویداد، کلید META فشار داده شده است یا نه. |
2 |
| relatedTarget |
Returns the element related to the element that triggered the mouse event |
2 |
| screenX |
این خصوصیت، مختصات افقی(x) موس را هنگامی که یک رویداد اتفاق بیافتد، برمی گرداند. |
2 |
| screenY |
این خصوصیت، مختصات عمودی(y) موس را هنگامی که یک رویداد اتفاق بیافتد، برمی گرداند. |
2 |
| shiftKey |
این خصوصیت یک مقدار بولی را بری گرداند، که مشخص می کند که، آیا در هنگام کلیک کردن موس، کلید SHIFT فشار داده شده است یا نه. |
2 |
| which |
این خصوصیت، مشخص می کند که هنگام اتفاق افتادن رویداد، کدام دکمه ی موس فشار داده شده است. |
2 |
Keyboardمرجع کلیه رویدادهای JavaScript
| متد | توضیحات | DOM |
|---|---|---|
| altKey |
این خصوصیت، مشخص می کند که، آیا در هنگام اتفاق افتادن رویداد، کلید ALT فشار داده شده است یا نه. |
2 |
| ctrlKey |
این خصوصیت، مشخص می کند که آیا در هنگام اتفاق افتادن رویداد، کلید CTRL فشار داده شده است یا نه. |
2 |
| charCode |
این خصوصیت، کد کاراکتر یونیکد دکمه ای که به وسیله ی رویداد onkeypress ایجاد شده است را برمی گرداند. |
2 |
| key |
این خصوصیت، هنگامی که در رویداد های دکمه، کلیدی(دکمه ای) فشار داده می شود، نام آن کلید را برمی گرداند. |
3 |
| keyCode |
این خصوصیت، کد کاراکتر یونیکدی که در رویداد onkeypress ایجاد شده است را برمی گرداند. یا اینکه، کد کاراکتر یونیکدی که در رویداد های onkeydown یا onkeyup ایجاد شده است را برمی گرداند. |
2 |
| location |
این خصوصیت، مکان قرارگیری کلید را برروی صفحه کلید مشخص می کند. |
3 |
| metaKey |
این خصوصیت، مشخص می کند که آیا در هنگام اتفاق افتادن رویداد کلید، کلید meta فشرده شده است یا نه. |
2 |
| shiftKey |
این خصوصیت مشخص می کند که آیا در هنگام اتفاق افتادن رویداد کلید، کلید SHIFT فشار داده شده است یا نه. |
2 |
| which |
از این خصوصیت، برای فهمیدن اینکه هنگام روی دادن یک رویداد موس، کدام کلید موس فشار داده شده است، استفاده می شود. |
2 |
HashChangeمرجع کلیه رویدادهای JavaScript
| متد | توضیحات | DOM |
|---|---|---|
| newURL |
از این خصوصیت، برای برگرداندن URL سند، هنگامی که قسمت هش(hash) تغییر می کند، استفاده می شود. |
|
| oldURL |
از این خصوصیت برای برگرداندن url سند، قبل از اینکه قسمت هش(hash) تغییر کند، استفاده می شود. |
PageTransitionمرجع کلیه رویدادهای JavaScript
| متد | توضیحات | DOM |
|---|---|---|
| persisted |
این خصوصیت، مشخص می کند که آیا یک صفحه وب توسط مرورگر ذخیره(cached) شده است یا نه. |
Focusمرجع کلیه رویدادهای JavaScript
| متد | توضیحات | DOM |
|---|---|---|
| relatedTarget | Returns the element related to the element that triggered the event | 3 |
Animationمرجع کلیه رویدادهای JavaScript
| متد | توضیحات | DOM |
|---|---|---|
| animationName | نام انیمیشن را برمی گرداند. | |
| elapsedTime |
این خصوصیت، تعداد ثانیه هایی که یک انیمیشن پخش شده است را برمی گرداند. |
Transitionمرجع کلیه رویدادهای JavaScript
| متد | توضیحات | DOM |
|---|---|---|
| propertyName |
خصوصیت css که با transition همراه شده است را برمی گرداند. |
|
| elapsedTime |
این خصوصیت، تعداد ثانیه هایی که یک انتقال(transition) در حال کار کردن است را برمی گرداند. |
Wheelمرجع کلیه رویدادهای JavaScript
| متد | توضیحات | DOM |
|---|---|---|
| deltaX |
مقدار اسکرول افقی دکمه چرخان موس را برمی گرداند(محور x). |
3 |
| deltaY |
مقدار اسکرول عمودی دکمه ی چرخان موس را برمی گرداند(محور y). |
3 |
| deltaZ |
مقدار اسکرول دکمه ی چرخان موس برای محور z را برمی گرداند. |
3 |
| deltaMode |
یک عدد را برمی گرداند که این عدد مشخص کننده ی واحد اندازه گیری برای مقادیر delta می باشد(پیکسل یا خط یا صفحه). |
3 |
- نوشته شده توسط احسان عباسی
- بازدید: 13982
دیدگاه‌ها
سلام روزتون بخیر . میخوام وقتی که روی صفحه زوم میشه درصدheight هدر سایت رو تغییر بدم ،برای این کار از چه رویدادی میتونم استفاده کنم یا راه حل دیگه ای داره؟
با عرض سلام وخسته نباشید
ببخشید اون متد هایی که با رنگ مشکی نشان داده شده یعنی منسوخ شده؟
سلام و درود
خیر منسوخ نشده است.