آموزش جاوا اسکریپت – رویدادها در جاوا اسکریپت

در این پست از مجموعه آموزش های جاوا اسکریپت JavaScript، به مبحث رویدادها در جاوا اسکریپت می‌رسیم. اول از همه بهتر است بپرسیم رویداد (Event) چیست؟ رویدادها در جاوا اسکریپت یکی از مباحث مهم در جاوا اسکریپت می‌باشد.

بهتر است بدانید که رویدادها جزئی از مدل شی گرای سند (DOM) می‌باشد. پس بنابراین بهتر است قبل از شروع یادگیری این مبحث با DOM آشنایی داشته باشید.

رویداد (Event) چیست؟

اگر بخواهیم به زبان ساده درمورد رویدادها در جاوا اسکریپت توضیح دهیم، رویداد به معنی رخ دادن یکسری اتفاقات در مرورگر می‌باشد. و یا رویداد به عبارتی دستکاری صفحات وب به دست کاربر و یا به دست مرورگر (به صورت خودکار) می‌باشد.

زمانی که کاربر کلیک می‌کند یک رویداد رخ می‌دهد. زمانی که صفحه وب بارگزاری می‌شود نیز یک رویداد رخ می‌دهد. یک طراح وب باید بداند چگونه با استفاده از رویدادها تعامل ایجاد کند و چگونه رویدادها را کنترل کند.

یک مثال ساده : تا به حال دقت کرده‌اید زمانی که بر روی دکمه ارسال در فرم نظرات کلیک می‌کنید متن داخل دکمه تغییر می‌کند؟ یا تا به حال دیده‌اید که هنگام رفتن ماوس بر روی یک تصویر، آن تصویر دچار تغییراتی شود، مثلا سایز آن بزرگ شود یا یک دور چرخش داشته باشد؟ همه این ها یک رویداد می‌باشند که توسط مرورگر یا کاربر انجام می‌شوند.

روش های استفاده از رویدادها

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

• خطی (inline) : در این روش رویداد مورد نظر را داخل همان کد HTML که می‌خواهیم می‌نویسیم.
• مستقل در جاوا اسکریپت : در این روش رویدادها را داخل همان فایل جاوا اسکریپت یا تگ <script> با استفاده از دسترسی به عنصر (document.getElementById) می‌نویسیم.
• استفاده از متدهای ()addEventListener و ()removeEventListener : در این روش نیز رویدادها را با استفاده از متدهای ذکر شده در جاوا اسکریپت تعریف می‌کنیم.

مثال برای استفاده از رویدادها

روش خطی

در این روش استفاده از رویدادها در جاوا اسکریپت، همانطور که از نامش پیداست به صورت خطی انجام می‌پذیرد. این روش بسیار متداول و آسان است و در ادامه پسا رویدادها در جاوا اسکریپت، ما نیز در تمامی مثال‌ها از این روش استفاده کرده‌ایم.

شکل کلی این دستور به صورت زیر است :

<element onclick="myScript">

به جای element تگ مورد نظر خود را می‌نویسیم و به جای myScript نام تابعی که می‌خواهیم اجرا شود می‌نویسیم.

مثال :

<button onclick="myFunction()">Click me</button>
<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

روش مستقل

این روش دقیقا متناسب با نام خود به صورت کاملا مستقل عمل می‌کند. در این روش داخل تگ HTML هیچ دستور جاوا اسکریپتی نوشته نمی‌شود. معمولا از این روش بسیار کم استفاده می‌شود.

شکل کلی این دستور به صورت زیر است :

object.onclick = function(){myScript};

به جای object عنصری که می‌خواهیم رویداد بر روی آن اعمال شود می‌نویسیم و به جای myScript نام تابعی که می‌خواهیم اجرا شود می‌نویسیم.

برای استفاده از این دستور و دسترسی به عنصر مورد نظر دو روش وجود دارد :

• استفاده از document.getElementById (و یا دیگر روش های فراخوانی عنصر) و اعمال مستقیم رویداد بر روی عنصری که بازگردانده می‌شود.
• فراخوانی یک عنصر و برابر قرار دادن آن با یک متغیر و اعمال رویداد بر روی متغیر.

هر دو روش کاملا صحیح می‌باشند و ما از هر دو روش یک مثال برایتان می‌زنیم.

بدون استفاده از متغیر :

<p id="demo">Click me to change</p>

<script>
document.getElementById("demo").onclick = function () {myFunction()};
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

با استفاده از تعریف متغیر :

<p id="demo">Click me to change</p>

<script>
var b = document.getElementById("demo");
b.onclick = function () {myFunction()};
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

استفاده از متدهای ()addEventListener و ()removeEventListene

ابتدا بهتر است بدانیم Event Handler چیست؟ به زبان ساده Event Handler به یک کدی گفته می‌شود که وظیفه مدیریت یک یا چند رویداد است. حالا ما می‌توانیم با استفاده از متد ()addEventListener یک Event Handler ایجاد کنیم. با استفاده از این متد می‌توان چندین Event Handler ایجاد کرد.

شکل کلی این دستور به صورت زیر است :

object.addEventListener("click", myScript);

به جای object عنصری که می‌خواهیم رویداد بر روی آن اعمال شود می‌نویسیم و به جای myScript نام تابعی که می‌خواهیم اجرا شود می‌نویسیم.

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

مثال بدون استفاده از متغیر :

<p id="demo">Click me.</p>

<script>
document.getElementById("demo").addEventListener("click", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>

مثال با استفاده از متغیر :

<p id="demo">Click me.</p>

<script>
var b = document.getElementById("demo");
b.addEventListener("click", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>

این روش در دهه اخیر به عنوان یک روش استاندارد تعریف رویداد برای یک عنصر معرفی شده است. همچنین استفاده از این روش بهینه تر است.

یک مثال دیگر به همراه متد ()removeEventListene :

<button id="clickIt">Click here</button>
<br>
<p id="demo"></p>

<script>
var x = document.getElementById("clickIt");
x.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML +="You clicked the button" + "<br><br>";
  document.getElementById("demo").innerHTML +="Now click Event is disabled!!" + "<br><br>";
  x.removeEventListener("click", myFunction);
}
</script>

در این مثال درصورتی که متد ()removeEventListene استفاده نشود با هر بار کلیک بر روی دکمه متن داخل پاراگراف تکرار خواهد شد.

انواع رویدادها

اگر بخواهیم رویدادها را به چند دسته تقسیم کنیم می‌توان آن‌ها را به پنج دسته تقسیم کرد :

• رویدادهای Mouse
• رویدادهای Keyboard
• رویدادهای Clipboard
• رویدادهای Focus
• دیگر رویدادها

چهار رویداد ذکر شده رایج ترین رویدادهای موجود در جاوا اسکریپت می‌باشند. در ادامه پست آموزش رویدادها در جاوا اسکریپت به توضیح هرکدام از این رویدادها خواهیم پرداخت.

رویدادهای Mouse

این رویدادها بیشترین استفاده را دارند و بسیار رایج می‌باشند. رویدادهای ماوس به صورت زیر می‌باشند:

• onclick : زمانی که کاربر روی عنصر کلیک کند رخ می‌دهد.

مثال :

<h1 id="demo" onclick="myFunction()">Click me.</h1>

<script>
function myFunction() {
  document.getElementById("demo").style.color="red";
}
</script>

• oncontextmenu : زمانی که کاربر روی عنصر راست کلیک کند رخ می‌دهد.

مثال :

<p style="background: yellow; padding: 10px;" oncontextmenu="myFunction()">
Right-click inside this box
</p>

<script>
function myFunction() {
  alert("You right-clicked inside the paragraph!");
}
</script>

• ondblclick : زمانی که کاربر روی عنصر دابل کلیک کند رخ می‌دهد.

مثال :

<p ondblclick="myFunction()">Double-click this paragraph to trigger a function.</p>
<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

• onmousedown : زمانی که کاربر روی عنصر کلیک کرده و نگه می‌دارد رخ می‌دهد.
• onmouseup : زمانی که کاربر روی عنصر کلیک کرده و رها می‌کند رخ می‌دهد.
• onmouseenter : زمانی که کاربر اشاره‌گر ماوس را بر روی عنصر ببرد رخ می‌دهد.
• onmouseleave : زمانی که کاربر اشاره‌گر ماوس را از روی عنصر بردارد رخ می‌دهد.

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

<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()" onmouseenter="mouseEnter()" onmouseleave="mouseLeave()">
Hover the mouse pointer over the text.
press mouse button down over this paragraph.
release mouse button.
move mouse pointer out of the text.
</p>

<script>
function mouseDown() {
  document.getElementById("myP").style.color = "red";
}
function mouseUp() {
  document.getElementById("myP").style.color = "green";
}
function mouseEnter() {
  document.getElementById("myP").style.color = "orange";
}
function mouseLeave() {
  document.getElementById("myP").style.color = "blue";
}
</script>

رویدادهای Keyboard

• onkeydown : زمانی که کاربر کلیدی را فشار دهد رخ می‌دهد.

مثال :

<input type="text" onkeydown="myFunction()">

<script>
function myFunction() {
  alert("You pressed a key inside the input field");
}
</script>

• onkeypress : زمانی که کاربر یکی از کلیدهای تایپی و حسابی را فشار دهد رخ می‌دهد.

مثال :

<input type="text" onkeypress="myFunction()">

<script>
function myFunction() {
  alert("You pressed a Typewriter or Numeric key inside the input field");
}
</script>

• onkeyup : زمانی که کاربر یکی از کلیدها را فشار داده و رها می‌کند رخ می‌دهد.

مثال :

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

<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
  document.getElementById("fname").style.background = "yellow";
}
</script>

رویدادهای Clipboard

• oncopy :  زمانی که کاربر محتوای یک عنصر را کپی می‌کند رخ می‌دهد.
• oncut : زمانی که کاربر محتوای یک عنصر را کات می‌کند رخ می‌دهد.
• onpaste : زمانی که کاربر یک محتوایی را داخل عنصر پیست می‌کند رخ می‌دهد.

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

<input type="text" oncopy="myFunction1()" oncut="myFunction2()" onpaste="myFunction3()" value="Try to copy, cut or paste this text">
<p id="demo"></p>

<script>
function myFunction1() {
  document.getElementById("demo").innerHTML = "You copied the text!"
}
function myFunction2() {
  document.getElementById("demo").innerHTML = "You cut the text!"
}
function myFunction3() {
  document.getElementById("demo").innerHTML = "You pasted the text!"
}
</script>

در این مثال سعی کنید متن داخل کادر متنی را کپی، کات و یا پیست کنید و رویداد مورد نظر اعمال خواهد شد.

رویدادهای Focus

• onfocusin : زمانی که یک عنصر در حال تمرکز است رخ می‌دهد.
• onfocusout : زمانی که یک عنصر درحال از دست دادن تمرکز است رخ می‌دهد.

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

Enter your name: <input id="demo" type="text" onfocusin="myFunction1()" onfocusout="myFunction2()">
<script>
function myFunction1() {
document.getElementById("demo").style.background = "gray";
document.getElementById("demo").style.color = "white";
}
function myFunction2() {
document.getElementById("demo").style.background = "red";
}
</script>

در این مثال زمانی که داخل کادر متنی کلیک کنید فوکوس اعمال خواهد شد و رویداد مورد نظر نیز اعمال می‌شود. و زمانی که در خارج از عنصر کلیک کنید فوکوس از دست می‌رود و در نتیجه رویداد مورد نظر اعمال خواهد شد.

شیء event

تمامی رویدادهایی که در بالا ذکر کردیم همگی جزئی از شیء event می‌باشند. این شیء می‌تواند با برخی رویدادهای Mouse و Keyboard نیز همراه شود. برای مثال :

• altKey : زمانی که کاربر کلید alt را فشار دهد رخ می‌دهد.
• ctrlKey : زمانی که کاربر کلید ctrl را فشار دهد رخ می‌دهد.
• shiftKey : زمانی که کاربر کلید shift را فشار دهد رخ می‌دهد.

این سه رویداد می‌تواند هم با onmousedown و هم با onkeydown همراه شود.

مثال کلی برای onkeydown :

<input type="text" onkeydown="isKeyPressed(event)">
<p id="demo"></p>

<script>
function isKeyPressed(event) {
  var x = document.getElementById("demo");
  if (event.altKey) {
    x.innerHTML = "The ALT key was pressed!";
  }
  if (event.ctrlKey) {
    x.innerHTML = "The CTRL key was pressed!";
  }
  if (event.shiftKey) {
    x.innerHTML = "The SHIFT key was pressed!";
  }
}
</script>

در این مثال درصورتی که داخل کادر متنی یکی از کلیدهای ctrl ،alt و یا shift را فشار دهید یک پیغامی که به عنوان رویداد ثبت شده است نمایش داده می‌شود.

مثال کلی برای onmousedown :

<body onmousedown="isKeyPressed(event)">
<p><strong>Tip:</strong> Try to press and hold down the alt, ctrl or shift key (on your keyboard) before you click in the document.</p>

<script>
function isKeyPressed(event) {
  if (event.altKey) {
    alert("The ALT key was pressed!");
  }
  if (event.ctrlKey) {
    alert("The CTRL key was pressed!");
  }
  if (event.shiftKey) {
    alert("The SHIFT key was pressed!");
  } 
}
</script>

در این مثال درصورتی که همراه با فشردن یکی از کلیدهای ctrl ،alt و یا shift با ماوس کلیک کنید یک پیغامی که به عنوان رویداد ثبت شده است نمایش داده می‌شود.

علاوه بر این، تمامی اشیاء موجود در DOM جزئی از شیء event نیز هستند. شیء event دارای یکسری متد و رویداد منحصر به فرد خود است که در ادامه به برخی از این رویدادهای پرکاربرد اشاره می‌کنیم :

• onchange : زمانی که مقدار یک کادر ورودی یا combo box و یا list box تغییر کند و تمرکز خود را از دست بدهد به صورت خودکار رخ می‌دهد.

مثال :

Enter some text: <input type="text" name="txt" onchange="myFunction(this.value)">

<script>
function myFunction(val) {
  alert("The input value has changed. The new value is: " + val);
}
</script>

در این مثال زمانی که شما داخل کادر ورودی متنی را وارد کنید و سپس کادر ورودی از تمرکز خارج شود رویدادی که درنظر گرفته شده اجرا می‌شود.

• oninput : زمانی که مقدار یک کادر ورودی تغییر کند رخ می‌دهد. این رویداد همانند onchange می‌باشد با این تفاوت که در این رویداد بلافاصله پس از تغییر رویداد رخ می‌دهد و همچنین تنها بر روی input و textarea عمل می‌کند.

مثال :

<input type="range" oninput="myFunction(this.value)">                             
<p id="demo"></p>

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

• onerror : زمانی که یک فایل یا رسانه خارجی نتواند بارگیری شود رخ می‌دهد.

مثال :

<img src="image.png" onerror="myFunction()">
<p>example image.</p>

<script>
function myFunction() {
  alert('The image could not be loaded.');
}
</script>

• onload : زمانی که یک شیء یا صفحه بارگیری کامل شده باشد رخ می‌دهد.

مثال :

<body onload="myFunction()">
<img src="https://programstore.ir/wp-content/uploads/2021/11/events-in-js-600x300.png">

<script>
function myFunction() {
  alert("Page is loaded");
}
</script>
</body>

• onselect : زمانی که متنی در input و یا textarea انتخاب شود رخ می‌دهد.

مثال :

<p>Select some of the text:</p>
<input type="text" value="Hello world!" onselect="myFunction()">

<script>
function myFunction() {
  alert("You selected some text!");
}
</script>

سخن آخر در مورد آموزش رویدادها در جاوا اسکریپت

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

همانطور که در بالا ذکر کردیم رویدادها جزئی از DOM هستند که به تعامل کاربر با صفحه وب کمک بسزایی می‌کند. شما می‌توانید در جاوا اسکریپت با استفاده از رویدادها کارهای بسیاری را تنها با دوخط کد انجام دهید و در فضا و زمان صرفه جویی کنید.

پاورپوینت فریم ورک های جاوا اسکریپت

پاورپوینت فریم ورک های جاوا اسکریپت

کلیک کنید