• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

جاوا اسکریپت- رویدادها (events)

S

sky boy

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

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

به طور ساده رویداد (event) در برنامه نویسی جاوا اسکریپت به معنی اتفاقی در یک صفحه وب است که می تواند عامل آن، کاربر یا به فرض بارگذاری کامل یک صفحه باشد،
بعد از بروز این اتفاق (رویداد)، مفسر جاوا اسکریپت مرورگر، آن را شناسایی کرده و متناسب با تابع تعریف شده، آن را اجرا می کند،
لذا همانطور که پیش تر در بحث توابع (functions) دیدیم، رویدادها در واقع حکم استارت، برای موتور توابع را بازی می کنند
و یک تابع بدون رویداد معمولا قابل اجرا نیست،
برای آشنایی بیشتر به مثال زیر توجه کنید (کافی است کد را در یک صفحه html کپی و آن را تست کنید).


کد: 
<script type="text/javascript">
function hello(){
    alert ("به آموزش جاوا اسکریپت خوش آمدید");
}
</script>
نحوه فراخوانی تابع بالا با رویداد onclick:


کد: 
<input type="button" name="button" value="کلیک کنید" onclick="hello();" />
 
S

sky boy

متخصص بخش برنامه نویسی
لیست رویداد ها در جاوا اسکریپت

رویداد ها در جاوا اسکریپت فراوانی و تنوع زیادی دارند،

ذکر این نکته نیز ضروری است که رویدادهای جاوا اسکریپتی در تمام مرورگرها و نسخه های مختلف آنها به یک میزان و به یک شکل پشتیبانی نمی شوند،
لذا در به کار بردن آنها باید به این مورد نیز دقت شود.
در لینک پایین میتونید لیست رو ببینید
لیست رویداد ها در جاوا اسکریپت


 
S

sky boy

متخصص بخش برنامه نویسی
addEventListener چیست؟

addEventListener که در برخی رویداد های بالا ذکر شده، به معنی شیوه استاندارد و تعریف شده W3C است که توسط آن با اجرای یک رویداد بر روی یک عنصر، مرورگر گوش به زنگ آن بوده و (بدون نسبت دادن مستقیم آن رویداد) توابع مربوط به آن فراخوانی می شوند، این امکان در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود، ولی معادل آن attachEvent است (به جزء اینترنت اکسپلورر، سایر مرورگر ها از addEventListener پشتیبانی می کنند)، به طور مثال تابع زیر با کلیک بر روی بلاک با آی دی فرضی black اجرا می شود:

کد: 
<script type="text/javascript">
function showtext(){
    alert("بر روی بلاک مشکی کلیک شد");
}
var myblock = document.getElementById("black");
if (myblock.addEventListener){
    //تمام مرورگرها به جزء اینترنت اکسپلورر
    myblock.addEventListener("click", showtext, false);
    } 
    else {
        //اینترنت اکسپلورر
        myblock.attachEvent("on"+"click", showtext);
}
</script>

مثال:

برای آشنایی بیشتر
می توانید جهت تست و بررسی بیشتر از کد زیر استفاده کنید.
کد: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>رویدادها در جاوا اسکریپت</title>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
#black{
    width:100px;
    height:100px;
    background-color:#333;
    display:block;
    margin:4px;
}
</style>
<script type="text/javascript">
<!-- پنهان کردن کد از مرورگرهایی که جاوا اسکریپت را پشتیبانی نمی کنند
function hello(){
    alert ("به آموزش جاوا اسکریپت خوش آمدید");
}
function add(){
        document.getElementById("text").innerHTML = "این متن با اجرا شدن رویداد onmouseover در بلاک div با آی دی text چاپ می شود!";
}
function clean(){
        document.getElementById("text").innerHTML = '';
}
-->
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!<br />
</noscript>
مثال برای رویداد onclick :
<br /><br />
<input type="button" value="کلیک کنید" onclick="hello();" />
<hr />
<br /><br />
مثال برای رویداد onmouseover و onmouseout :
<br /><br />
<input type="button" value="ماوس را بر روی این دکمه بیاورید" onmouseover="add();" />
<input type="button" value="ماوس را از روی این دکمه خارج کنید" onmouseout="clean();" />
<div id="text"></div>
<hr />
<br /><br />
مثال برای حالت addEventListener :
<br /><br />
بر روی بلاک زیر کلیک کنید.
<div id="black"></div>
<script type="text/javascript">
<!--
function showtext(){
    alert("بر روی بلاک مشکی کلیک شد");
}
var myblock = document.getElementById("black");
if (myblock.addEventListener){
    //تمام مرورگرها به جزء اینترنت اکسپلورر
    myblock.addEventListener("click", showtext, false);
    } 
    else {
        //اینترنت اکسپلورر
        myblock.attachEvent("on"+"click", showtext);
}
-->
</script>
<hr />
<br /><br />
مثال برای حالت onfocus و onblur :
<br /><br />
<input type="text" value="در این فیلد کلیک کنید..." onfocus="myFocus(this);" onblur="myBlur(this);" />
<script type="text/javascript">
<!--
function myFocus(element){
    if (element.value == element.defaultValue){
        element.value = '';
     }     
}
function myBlur(element){
    if (element.value == ''){
        element.value = element.defaultValue;
     }     
}
-->
</script>
<hr />
<br /><br />
مثال برای حالت onkeydown و onkeyup :
<br /><br />
<input type="text" id="first" value="در این فیلد متنی تایپ کنید..." onkeydown="myKeydown(this);" onkeyup="myKeyup(this);" />
<script type="text/javascript">
<!--
function myKeydown(element){
    if (element.value == element.defaultValue){
        element.value = '';
     }     
}
function myKeyup(element){
    if (element.value == ''){
        element.value = element.defaultValue;
     }     
}
-->
</script>
</body>
</html>
 
برای ارسال پاسخ شما باید وارد سیستم شوید.
بالا