رویدادها (Events) در جاوا اسکریپت (JavaScript)

معنی رویداد (Event) در جاوا اسکریپت

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

<script>
function setAlert(){
    alert("این پیام با کلیک کاربر بر روی دکمه نمایش داده می شود");
}
</script>
<input type="button" name="button" value="کلیک" onclick="setAlert();">

زمانی که کاربر بر روی دکمه input کلیک می کند قسمت مربوط به onclick اجرا و تابع فرضی setAlert فراخوانی می شود، onclick یکی از رویدادهای پرکاربرد جاوا اسکریپت در صفحات وب است.

شیوه های به کار بردن (Handle) رویدادها در صفحات وب

 برای استفاده از رویدادها یا به اصطلاح Handle (به کار بردن) آنها در صفحات وب و نسبت دادن رویداد به یک عنصر در مجموع سه راه وجود دارد:
- استفاده از رویداد با Event Handler خطی (Inline) و ترکیب با کدنویسی HTML
- استفاده از رویداد با Event Handler مستقل و خارج از کدنویسی HTML
- استفاده از رویداد با addEventListener و removeEventListener
در ادامه آموزش به صورت موردی در خصوص هر کدام از این شیوه ها توضیح خواهیم داد.

استفاده از رویداد با Event Handler خطی (Inline)

ساده ترین شیوه به کاربردن رویداد در صفحات وب استفاده از آنها به صورت خطی (Inline) در ترکیب با تگ های HTML مانند input، div، button و... است، به طور مثال:

<script>
function showMessage(msg){
    alert(msg);
}
</script>
<button type="button" onclick="showMessage('پیامی که با کلیک نمایش داده می شود');">Click</button>

با کلیک بر روی دکمه button رویداد خطی onclick اتفاق می افتد و تابع showMessage اجرا و در نهایت پیام زیر به صورت پنجره Alert نمایش داده خواهد شد:

پیامی که با کلیک نمایش داده می شود

نکته 1: اختصاص رویداد به شیوه خطی به جهت ترکیب بخش اسکریپت نویسی با کدنویسی HTML از نظر دانش سئو (SEO یا بهینه سازی صفحات وب برای موتورهای جستجو) توصیه نمی شود، بهتر است این شیوه را صرفا به عنوان روشی به اصطلاح دم دستی مد نظر داشته باشیم و برای صفحاتی که از نظر سئو باید بهینه باشند از روش هایی که در ادامه بررسی خواهیم کرد استفاده کنیم (توصیه می شود بخش اسکریپت ها را از بخش HTML جدا کنیم).
نکته 2: در اصطلاح برنامه نویسی به اتفاق افتادن رویداد Fire یا Trigger و به فراخوانی تابع Call می گویند.

استفاده از رویداد با Event Handler مستقل

روش دیگر به کار بردن رویداد استفاده از آن به صورت مستقل (در تگ script یا فایل JS) و خارج از کدنویسی HTML است، در این شیوه می توانیم به یک عنصر در صفحات وب یک یا چند رویداد مجزا با تنظیمات سفارشی نسبت دهیم، به طور مثال:

<button id="click-button" type="button">Click</button>
<script>
function showMessage(msg){
    alert(msg);
}
var elm = document.getElementById('click-button');
elm.onclick = function(){
    showMessage('پیامی که با کلیک نمایش داده می شود');
}
</script>

همان طور که مشخص است در این شیوه از به کار بردن رویدادها ابتدا باید عنصر مورد نظر در صفحه انتخاب شود (در اینجا متغیر elm با توجه به ID تعیین شده در متد getElementById دکمه button را انتخاب و تبدیل به آبجکت می کند)، سپس با نمونه Syntax زیر رویداد onclick را برای این آبجکت Handle می کنیم (یعنی با اجرای onclick در عنصر elm کدهای تنظیم شده در داخل کاراکترهای {} پردازش می شوند):

elm.onclick = function(){}

عنصر مورد نظر در صفحات وب می تواند بسته به نیاز برنامه متفاوت باشد، به طور مثال آبجکت window یا آبجکت تگ های HTML، مثال:

<script>
function showMessage(msg){
    alert(msg);
}
window.onload = function (){
    var elm = document.getElementById('click-button');
    elm.onclick = function(){
        showMessage('پیامی که با کلیک نمایش داده می شود');
    }
}
</script>
<button id="click-button" type="button">Click</button>

در این نمونه کد ما رویداد onload را برای آبجکت window (پنجره جاری) تنظیم کرده ایم، در نمونه کد اول اگر تگ script را قبل از تگ button درج کنیم خطای زیر را دریافت خواهیم کرد (مشاهده خطاها با زدن کلید F12 در مرورگر، قسمت Console):

Uncaught TypeError: elm is null

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

استفاده از رویداد با addEventListener و removeEventListener

در سال 2000 میلادی کنسرسیوم جهانی وب W3C شیوه دیگری برای اختصاص رویداد جاوا اسکریپتی به عناصر مختلف صفحات وب معرفی کرد که در حال حاضر به استانداردی فراگیر تبدیل شده است:

https://www.w3.org/TR/DOM-Level-2-Events/#events-Events-registration

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

object.addEventListener('event', function, options);

پارامتر object همان عنصری است که در صفحه انتخاب کرده ایم، قسمت Event نام رویداد (به فرض click) و Function تابعی است که به رویداد متصل و قسمت Options تنظیمات اضافه و اختیاری متد است که در صورت نیاز اعمال می شود (مقدار پارامتر سوم را فعلا false در نظر گرفته و توضیح تکمیلی در این خصوص را به آموزش های پیشرفته جاوا اسکریپت موکول می کنیم)، در نمونه کد زیر در صورت کلیک بر روی بلاک رنگی با آی دی فرضی clickable تابع showText اجرا می شود:

<style>
#clickable{
    width: 100px;
    height: 100px;
    background: #FC9;
}
</style>
<div id="clickable"></div>
<script>
var block = document.getElementById("clickable");

function showText(){
    alert("بر روی بلاک رنگی کلیک شد");
}

if(block.addEventListener){
    //تمام مرورگرها به جزء اینترنت اکسپلورر 8 و ماقبل
    block.addEventListener("click", showText, false);
} else{
    //اینترنت اکسپلورر 8 و ماقبل
    block.attachEvent("onclick", showText);
}
</script>

در انتهای این صفحه می توانیم به صورت آنلاین مثال هایی از کاربرد addEventListener را بررسی کنیم.
همان طور که مشخص است بین دو روش addEventListener و Event Handler مستقل شباهت زیادی وجود دارد، اما به چند دلیل استفاده از روش addEventListener می تواند بهینه تر باشد:
- وجود امکان حذف رویداد اختصاص داده شده به یک عنصر با removeEventListener (detachEvent برای IE8 و ماقبل)، مثال:

<style>
#clickable{
    width: 100px;
    height: 100px;
    background: #FC9;
}
</style>
<div id="clickable"></div>
<script>
var block = document.getElementById("clickable");

function showText(){
    alert("این پیام فقط یک بار نمایش داده می شود");
    if(block.removeEventListener){
        block.removeEventListener("click", showText, false);
    } else{
        block.detachEvent("onclick", showText);
    }
}

if(block.addEventListener){
    block.addEventListener("click", showText, false);
} else{
    block.attachEvent("onclick", showText);
}
</script>

به این صورت با یک بار اجرای تابع showText رویدادهای اختصاص داده شد قبلی حذف می شوند.
- وجود امکان اختصاص بیش از یک تابع در رویداد مد نظر، به طور مثال:

<button id="click-button" type="button">Click</button>
<script>
var button = document.getElementById("click-button");

function showText1(){
    alert("تابع اول اجرا شد");
}

function showText2(){
    alert("تابع دوم اجرا شد");
}

if(button.addEventListener){
    button.addEventListener("click", showText1, false);
    button.addEventListener("click", showText2, false);
} else{
    button.attachEvent("onclick", showText1);
    button.attachEvent("onclick", showText2);
}
</script>

به این صورت می توانیم دو یا چند Handler مختلف را به عنصر مورد نظرمان با Listener مشابه نسبت دهیم.

رویدادهای پرکاربرد جاوا اسکریپت در صفحات وب

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

مثال و پیش نمایش آنلاین

برای آشنایی بیشتر با مبحث رویدادها آموزش را با چند مثال به پایان می بریم، جهت تست و بررسی می توانیم از کد و پیش نمایش آنلاین زیر استفاده کنیم:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تست و بررسی رویدادها در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
#black-block {
    width: 100px;
    height: 100px;
    background-color: #333;
    display: block;
    margin: 4px;
}
#show-text {
    height: 20px;
}
</style>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!<br></noscript>
<script>
function hello(){
    alert("به آموزش جاوا اسکریپت خوش آمدید");
}

function add(){
        document.getElementById("show-text").innerHTML = "این متن با اجرا شدن رویداد onmouseover در بلاک div با آی دی فرضی show-text چاپ می شود، برای بررسی رویداد onmouseout نشانه گر را از محدوده این دکمه خارج کنید.";
}

function clean(){
        document.getElementById("show-text").innerHTML = '';
}
</script>
مثال برای رویداد onclick:
<br><br>
<input type="button" value="کلیک کنید" onclick="hello();">
<hr>
مثال برای رویداد onclick با شیوه addEventListener:
<br><br>
بر روی بلاک زیر کلیک کنید.
<div id="black-block"></div>
<script>
var myblock = document.getElementById("black-block");

function showText(){
    alert("بر روی بلاک مشکی کلیک شد");
}

if(myblock.addEventListener){
    //تمام مرورگرها به جزء اینترنت اکسپلورر نسخه 8 و ماقبل
    myblock.addEventListener("click", showText, false);
} else {
    //اینترنت اکسپلورر نسخه 8 و ماقبل
    myblock.attachEvent("onclick", showText);
}
</script>
<hr>
مثال برای رویدادهای onmouseover و onmouseout:
<br><br>
<input type="button" value="ماوس را بر روی این دکمه بیاورید" onmouseover="add();" onmouseout="clean();">
<div id="show-text"></div>
<hr>
مثال برای رویدادهای onfocus و onblur:
<br><br>
<input type="text" value="در این فیلد کلیک کنید..." onfocus="myFocusFunc(this);" onblur="myBlurFunc(this);">
<script>
function myFocusFunc(element){
    if(element.value == element.defaultValue){
        element.value = '';
    }
}

function myBlurFunc(element){
    if(element.value == ''){
        element.value = element.defaultValue;
    }  
}
</script>
<hr>
مثال برای رویدادهای onkeydown و onkeyup:
<br><br>
<input type="text" id="first" placeholder="اینجا تایپ کنید..." onkeydown="myKeydownFunc(this);" onkeyup="myKeyupFunc(this);">
<script>
function myKeydownFunc(element){
    element.style.color = "red";  
}

function myKeyupFunc(element){
    element.style.color = "blue";    
}
</script>
</body>
</html>

پیش نمایش آنلاین