آشنایی با 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";
}
};