آشنایی با event ها و event listener

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

چند نمونه از event listener های پر کاربرد

onload

onclick

onmouseover

onblur

onfocus

سه روش استفاده از event listener

1- استفاده از event listener درون کد HTML: این نوع سینتکس به خاطر تداخل کد جاوااسکریپت درون کد HTML، باعث شلوغ شدن صفحه HTML ما می شود:

<button onclick="alert('Hello, world');"

Run Some JavaScript

</button>

2- پرکاربردترین روش مورد استفاده برای اجرای event listener ها در فایل جدای جاوااسکریپت:

element.event = function() {

event handler code...

};

مثال

myElement.onclick = function() {

alert ('Hello,World')

};

نکته: در حالت عادی در انتهای function از ; استفاده نمی کنیم. در این موقعیت بدلیل این که کل سینتکس یک جمله محسوب می شود، در انتهای آن از سمی کالن یا ; استفاده می کنیم.

3- سینتکس یک خطی

document.addEventListener('click', myFunction, false);

برخی از مرورگرهای قدیمی این کد را پشتیبانی نمی کنند و بهتر است برای کاربرد بهتر از کتابخانه jQuery استفاده شود.

__________________________________________
مثال های کاربردی

/// onclick

function prepareEventHandlers() {   
    var myImage = document.getElementById("mainImage");
    myImage.onclick =  function() {
        alert("You clicked the image");
    }
}

window.onload = function() {
    // prep anything we need to
    prepareEventHandlers();
};

//////////////onfocus و onblur

var emailField = document.getElementById("email");

emailField.onfocus = function() {
    if ( emailField.value == "your email") {
        emailField.value = "";
    }
};

emailField.onblur = function() {
    if ( emailField.value == "") {
        emailField.value = "your email";
    }
};