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

رویداد یا Event در جاوا اسکریپت چیست؟

رویدادها، یا به انگلیسی Event، در جاوا اسکریپت قدرت بسیار بالایی برای پویا نمایی صفحات به ما می دهند. طرز کار رویدادها به این شکل است که ما می توانیم کدهای جاوا اسکریپتی بنویسیم و آن ها را طوری تنظیم کنیم که اگر یک اتفاق خاص (یعنی یک رویداد) در صفحه انجام شود، آن کدها نیز اجرا شوند.

یکی از این رویدادها می تواند کلیک کردن روی یک عنصر HTML باشد. اگر بخواهیم برای چنین حالتی کد بنویسیم می گوییم:

onclick=JavaScript

و به جای JavaScript کدهای جاوا اسکریپتمان را قرار می دهیم.

بگذارید چند مثال از رویدادها را برایتان بگویم:

کلیک کردن با موس روی شیء ای خاص
زمانی که بارگذاری صفحه تمام شود
زمانی که یک تصویر بارگذاری می شود
زمانی که موس را (بدون کلیک) روی یک عنصر خاص ببریم
زمانی که داده های input (فیلد فرم ها) تغییر کند
زمانی که فرم HTML ثبت و ارسال شود
زمانی که کلیدی روی کیبورد فشار داده می شود
و ....

به طور مثال در کد زیر، عنصر <h1> پس از کلیک کاربر تغییر می کند:

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

</body>
</html>

مشاهده خروجی در JSBin

البته می توانیم این کد را به شکل دیگری هم بنویسیم و به جای آنکه کد را مستقیما به onclick اضافه کنیم، آن را به یک تابع بدهیم:

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>

مشاهده خروجی در JSBin

نحوه استفاده از رویدادها

برای استفاده از یک رویداد چند روش وجود دارد. روش اول این است که attribute ای که مخصوص آن رویداد است را به عنصر اضافه کنید. مثال زیر را ببینید:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the date.</p>

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

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

مشاهده خروجی در JSBin

در این مثال تابعی به نام displayDate داریم که هنگام کلیک شدن دکمه، اجرا خواهد شد.

روش دیگری که برای اضافه کردن رویدادها به کار می رود، استفاده از جاوا اسکریپت است. مثال:

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

مشاهده خروجی در JSBin

میبینید که ابتدا با تابع getElementById عنصر را دریافت کرده ایم و سپس با متد onclick یک رویداد برایش تعریف کرده ایم. حالا هر زمان که روی آن کلیک شود تابع displayDate اجرا خواهد شد.

رویدادهای دیگر

همانطور که گفتیم رویداد onclick تنها رویداد جاوا اسکریپت نیست و رویدادهای onload (به معنی «پس از بارگذاری») و onunload (به معنی پس از خروج از صفحه) نیز جزو رویدادها حساب می شوند. این رویدادها زمانی اجرا می شوند که کاربر به صفحه وارد یا از صفحه خارج شود. به طور مثال می توانیم از onload استفاده کنیم تا زمانی که وارد سایت ما شد بر اساس نوع و نسخه مرورگر او، بهترین ورژن سایت خود را به او ارائه دهیم. همچنین به عنوان یک استفاده دیگر می توانیم از آن ها برای کار با cookies استفاده کنیم. به طور مثال کد زیر به محض ورود شما به صفحه خروجی آن در JSBin تعیین می کند که آیا cookie های مرورگر شما فعال است یا خیر:

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<p id="demo"></p>

<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
  } else {
    text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

مشاهده خروجی در JSBin

یکی از رویدادهای معروف دیگر در جاوا اسکریپت رویداد onchange (به معنی «در صورت بروز تغییر») است. این رویداد اکثرا برای اعتبارسنجی فرم ها مورد استفاده قرار می گیرد. یکی از مثال های ساده آن را برایتان آورده ایم؛ زمانی که کاربر محتوای فیلد input را تغییر دهد، تابع ()upperCase صدا زده می شود:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>
</head>
<body>

Enter your name: <input type="text" id="fname" onchange="myFunction()">

<p dir ='rtl'>زمانی که داخل فرم نامتان را بنویسید و سپس جایی خارج از فرم کلیک کنید، تابعی صدا زده می شود که حروف انگلیسی تایپ شده را تبدیل به حروف بزرگ می کند</p>

</body>
</html>

مشاهده خروجی در JSBin

یکی دیگر از رویدادهای معروف HTML، رویدادهای onmouseover (به معنی «هنگامی که موس روی آن برود») و onmouseout (به معنی «هنگامی که موس از روی عنصر کنار برود») می باشند.

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

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
موس را روی من بیاور</div>

<script>
function mOver(obj) {
  obj.innerHTML = "از اینکه به حرفم گوش کردی ممنونم"
}

function mOut(obj) {
  obj.innerHTML = "موس را روی من بیار"
}
</script>

</body>
</html>

مشاهده خروجی در JSBin

سه رویداد بسیار کاربردی دیگر رویدادهای زیر هستند:

onmousedown به معنی «هنگام نگه داشتن کلیک موس»
onmouseup به معنی «پس از رها کردن کلیک موس»
onclick به معنی «پس از یک بار کلیک کردن»

نحوه کار این سه به این شکل است: هر کلیک از دو قسمت تشکیل شده است؛ هنگامی که دکمه موس را فشار می دهیم و هنگامی که دکمه موس را رها می کنیم. زمانی که دکمه موس را فشار می دهیم onmousedown اجرا می شود، زمانی که دکمه موس را رها می کنیم onmouseup اجرا می شود و زمانی که این دو عملیات تمام شد، یک کلیک کامل شده است بنابراین حالا onclick اجرا می شود.

به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
روی من کلیک کن</div>

<script>
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerHTML = "مرا رها کن";
}

function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="دستت درد نکنه";
}
</script>

</body>
</html>

مشاهده خروجی در JSBin

ما می توانیم مثال های خلاقانه تری نیز بزنیم. به طور مثال در کد زیر از تصویر معروف لامپ خودمان استفاده می کنیم:

<!DOCTYPE html>
<html>
<head>
<script>
function lighton() {
  document.getElementById('myimage').src = "https://www.w3schools.com/js/bulbon.gif";
}
function lightoff() {
  document.getElementById('myimage').src = "https://www.w3schools.com/js/bulboff.gif";
}
</script>
</head>

<body>

<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="https://www.w3schools.com/js/bulboff.gif" width="100" height="180" />

<p>Click mouse and hold down!</p>

</body>
</html>

مشاهده خروجی در JSBin

در مثال بالا هنگامی که روی لامپ کلیک کرده و کلیک را نگه می دارید، تصویر لامپ با تصویر یک لامپ دیگر عوض می شود بنابراین شما لامپ را با یک کلیک روشن می کنید! در واقع مثال بالا ترکیبی از درس های چند جلسه اخیر است؛ ابتدا با استفاده از DOM و تابع getElementById عنصر مورد نظر را که همان تصویر لامپ (تگ img) است، می گیریم. سپس رویدادهای onmousedown و onmouseup را برایش قرار داده و می گوییم با اجرا شدن هر کدام، کدام تصویر را نمایش دهد.

حتی می توانید خیلی پیشرفته تر عمل کنید و چنین کار زیبایی را پدید آورید. با حرکت دادن موس خود روی دایره وسط صفحه در این مثال می بینید که چه طرح زیبایی پدید آمده است!

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

منبع: وب سایت های codepen و w3schools

دیدگاه‌های شما (3 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

سعید

24 دی 1400

سلام خسته نباشید ببخشید لینک متن "چه کار زیبایی خرابه لطفا درستش کنید ممنون

| اسحاق |

22 آذر 1399

سلام لینک متن " چنین کار زیبایی " خرابه لطفادرستش کنید و اگه اوکیش کردید یه اعلانی بدید بیام ببینم چیه

محسن

24 فروردین 1398

سلام من تازه دارم کار با event ها رو یاد میگیرم. میخواستم بپرسم آیا event ای هست که موقع قطع شدن اینترنت کاربر کاری بکنه؟ چون من سایتی دارم میسازم که باید کاربرا همیشه به اینترنت متصل باشن. ممنونم

امیر زوارمی

25 فروردین 1398

با سلام به شما دوست عزیز، بله رویدادی به نام offline داریم. میتونید در اینجا بیشتر مطالعه کنید: https://developer.mozilla.org/en-US/docs/Web/Events/offline تعداد رویداد ها زیاد هستند و نحوه ی کارشون دقیقا یکسان هست بنابراین ما تک تک اونها رو معرفی نمی کنیم. لیست اونها به صورت رایگان در اینترنت در دسترس هست.

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

Events in JavaScript

رویداد یا Event در جاوا اسکریپت چیست؟

نحوه استفاده از رویدادها

رویدادهای دیگر