کلیه رویدادهای 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