رویدادها در جاوااسکریپت

از ویکی کد
(تفاوت) → نسخهٔ قدیمی‌تر | نمایش نسخهٔ فعلی (تفاوت) | نسخهٔ جدیدتر ← (تفاوت)
پرش به ناوبری پرش به جستجو

JavaScript Events

رویداد ها در جاوااسکریپت

HTML events are "things" that happen to HTML elements.

رویداد html "چیزهایی" هستند که برای عناصر html ای اتفاق می افتد.

When JavaScript is used in HTML pages, JavaScript can "react" on these events.

زمانی که شما از جاوااسکریپت درون صفحات html استفاده می کنید ، جاوااسکریپت می تواند به این رویداد ها را "واکنش" نشان دهد .

HTML Events

رویداد ها در html

An HTML event can be something the browser does, or something a user does.

یک رویداد در html می تواند کاری باشد که مرورگر انجام می دهد و یا کاری باشد که یک کاربر انجام می دهد .

Here are some examples of HTML events:

در زیر می توانید مثالهایی از رویداد ها در html را ببینید :

·  An HTML web page has finished loading

زمانی که بارگذاری یک صفحه html به طور کامل به پایان می رسد .

·  An HTML input field was changed

زمانی که یک مقدار فیلد ورود داده یا input field تغییر می کند .

·  An HTML button was clicked

زمانی که بر روی یک دکمه html ای کلیک می شود .

Often, when events happen, you may want to do something.

اغلب ، زمانی که یک رویداد رخ می دهد ، شما می خواهید یک کاری را انجام دهید .

JavaScript lets you execute code when events are detected.

جاوااسکریپت به شما این اجازه را می دهد که کد های خود را زمانی که رویدادهای مد نظر شما اتفاق افتاد ، اجرا کنید .

HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.

Html اجازه می دهد که به وسیله ی attribute یا خاصیت event در html  و کد های جاوااسکریپت ، شما بتوانید رویداد هایی را که روی عناصر html اتفاق می افتد را مدیریت کنید .

With single quotes:

با علامت تک کوتیشن یا ′ :

<element event='some JavaScript'>

With double quotes:

با دو کوتیشن یا ″ :

<element event="some JavaScript">

In the following example, an onclick attribute (with code), is added to a <button> element:

در مثال زیر ، ویژگی onclick (با کد ) به یک عنصر <button> در html اضافه شده است :

Example

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

In the example above, the JavaScript code changes the content of the element with id="demo".

در مثال بالا، کد جوا اسکریپت محتوای عنصر را که شناسه یا id آن برابر با کلمه "demo" را است را تغییر می دهد .

In the next example, the code changes the content of its own element (using this.innerHTML):

در مثال بعدی ، کد ما محتوای عنصر html مربوط به خود را (با استفاده از دستور this.innerHTML ) تغییر می دهد :

Example

<button onclick="this.innerHTML = Date()">The time is?</button>

JavaScript code is often several lines long. It is more common to see event attributes calling functions:

کد های جاوااسکریپت معمولا طولانی بوده و در چندین خط نوشته می شوند . فراخوانی توابع در Attribute یاخاصیت event عنصر بسیار روش مناسبتری است :

Example

<button onclick="displayDate()">The time is?</button>

Common HTML Events

رویداد های پر استفاده html

Here is a list of some common HTML events:

در اینجا می توانید لیستی از رویداد های پر استفاده در html را ببینید:

رویداد توضیحات
Onchange زمانی که محتوای یک عنصر html تغییر می کند .
Onclick زمانی که کاربر بر روی یک عنصر html کلیک می کند .
Onmouseover زمانی که کاربر موس خود را روی یک عنصر html می برد .
Onmouseout زمانی که کاربر موس خود را از محدوده یک عنصرhtml خارج می کند .
Onkeydown زمانی که کاربر یک کلید از کیبرد را می فشارد .
Onload زمانی که بارگذاری صفحه به طور کامل پایان می پذیرد .

The list is much longer: W3Schools JavaScript Reference HTML DOM Events.

رویداد های بسیاری وجود دارند ،شما می توانید لیست کامل این رویداد ها را در لینک روبه رو ببینید :

What can JavaScript Do?

جاوااسکریپت چه کاری می تواند انجام دهد ؟

Event handlers can be used to handle, and verify, user input, user actions, and browser actions:

رویداد ها می توانند برای مدیریت و بررسی صحت و سقم مواردی همچون ، داده ای که کاربر به عنوان ورودی وارد می کند ، کارهایی که کاربر و مرورگر انجام می دهند  استفاده شوند .

·  Things that should be done every time a page loads

کارهایی که باید هر دفعه که صفحه بارگذاری شد ، انجام شوند .

·  Things that should be done when the page is closed

کارهایی که می بایست زمانی که صفحه بسته شد ، انجام شوند .

·  Action that should be performed when a user clicks a button

عملی که می بایست زمانی که کاربر روی یک دکمه کلیک می کند انجام شود .

·  Content that should be verified when a user inputs data

محتوایی که می بایست زمانی که کاربر داده ورودی خود را وارد می کند ، بررسی شود.

·  And more ...

و ...

Many different methods can be used to let JavaScript work with events:

روشهای گوناگونی می توانند استفاده شوند تا به جاوااسکریپت این اجازه را بدهد که با رویداد ها کار کند :

·  HTML event attributes can execute JavaScript code directly

خاصیت یا Attribute ، رویداد یا event در html می تواند کد های جاوااسکریپت را به صورت مستقیم اجرا کند.

·  HTML event attributes can call JavaScript functions

ویژگی رویداد یا event در html می تواند توابع جاوااسکریپت را فراخوانی کند .

·  You can assign your own event handler functions to HTML elements

شما می توانید مدیریت  کننده رویداد یا event handler خود را به عناصر html اضافه کنید .

·  You can prevent events from being sent or being handled

شما می توانید از رخ دادن رویداد ها و یا مدیریت آنها جلوگیری کنید .

You will learn a lot more about events and event handlers in the HTML DOM chapters.

شما مطالب بیشتری را در مورد رویداد ها و مدیریت کننده رویداد ها در فصل html doc خواهید آموخت .