رویدادها در جیکوئری

1395/10/24 زهرا زارع 4420

در قسمت هاي گذشته با مباني جي كوئري و نحوه دانلود و برخي از دستورات آن آشنا شديم. در ادامه ابتدا مرور مختصري به مباحث قبل كرده، سپس به معرفي رخدادهاي بارگذاري در صفحات وب مي پردازيم.
رويداد و يا رخداد ها (Events)  از جمله توابع اصلي و اساسي در جي  كوئري براي تعامل كاربران با مرورگر مي باشند. در گذشته از جاوااسكريپت براي ايجاد رويداد در صفحه وب استفاده مي شد كه استاندارد ها در مرورگر هاي باعث بروز مشكلات فراوان مي شد. اما اكنون با كمك كتابخانه جي كوئري، بدون درگير شدن با جزييات مرورگرها مي توان رويداد ايجاد كرد.
به زبان ساده يك رويداد به معناي بروز يك اتفاق در صفحه وب مي باشد كه پس از آن مفسر جي كوئري تابع آن را شناسايي كرده و اجرا  می نمايد. جي كوئري اين امكان را در اختيار ما قرار مي دهد تا رويداد هاي سفارشي را با توجه به به نيازهاي خود ايجاد كرده و از آن استفاده كنيم.

رخدادهاي بارگذاري در صفحات وب:

همانگونه كه از نام  مشخص است مربوط به رخدادهايي مي باشد كه در زمان لود شدن صفحه وب مي توان از آن ها استفاده نمود. رويدادهاي بارگذاري در صفحات وب شامل:
•  .ready()
•  .load()
•  .unload()
ممكن است به جی کوئری دستوری را بدهيد که بر روي عنصری خاص، عملیات خاصی را اعمال كند، اما عنصر مربوطه در صفحه لود یا بارگذاری نشده باشد. پس باید دستور بدهیم ، که وقتی عملیات بر روی عناصر در  صفحه اعمال شود که حتما قبل از آن صفحه بارگذاری و آماده شده باشد. به دستور زير دقت كنيد:

$(document).ready(function(){
//code
});

اين كد دستور مي دهد تا  هر وقت داکیومنت و يا  صفحه ready یا آماده و کاملا لود شد ، یکسری توابع صدا زده شوند که البته عملیات مورد نظر در درون آکولاد باز و بسته نوشته میشوند. توجه کنید که function میتواند پارامتر هم داشته باشد البته در كد بالا پارامتري ندارد. حال تمامي دستوراتي که به جای (//code) نوشته شوند، پس از بارگذاري  كامل صفحه اجرا مي شود. لازم است اين كد در ابتداي برنامه نوشته شود.
پارامتر document  نيز به صفحه جاري اشاره داشته كه قرار است توابع در آن اجرا شوند.
مثال:

$(document).ready(function(){
alert(''welcome");
});


با اجراي برنامه زير خواهيد ديد كه پيغام welcome به شما نمايش داده خواهد شد.

•  رويداد .load()

  اين رويداد  نيز همانند  Ready، زماني اتفاق مي افتد كه تمامي عناصر موجود در صفحه به صورت كامل بارگذاري شده باشند و براي كار با Ajax مي باشد كه توسط آن مي توان اطلاعات مورد نظر را از سرور خوانده و اطلاعات بازگشتي از سرور را در Selector يا عنصر منتخب نمايش دهد.
Ajax ، تكنولوژي ارتباط با سرور از طريق JavaScript مي باشد كه در جي كوئري نيز برخي توابع از جمله load براي تبادل اطلاعات با سرور به كار مي رود.
شكل كلي دستور:

$(selector).load ( url , data , function( response , status , xhr ) ) ;

همانطور كه مشاهده مي كنيد، اين رويداد شامل 3 پارامتر مي باشد كه به تشريح آن خواهيم پرداخت:
url: يك پارامتر اجباري كه مشخص كننده آدرس فايل اسكريپتي ست كه قرار است اطلاعات از آن خوانده شود.
Data: اين پارامتر اختياري، مشخص كننده اطلاعاتي است كه قرار است به همراه درخواست به سرور ارسال شود.
function: اين پارامتر اختياري، زماني اجرا مي شود كه عمليات لود بصورت كامل انجام شود و خود نيز مي تواند پارمتر هم داشته باشد. از جمله پارامترهاي function:
Response:نتيجه اطلاعاتي است كه از درخواست حاصل شده است.

Status:وضعيت درخواست را مشخص مي كند كه شامل يكي از حالت هاي زير است:
  succes : بيانگر  وضعيت موفق
  Notmodifiedda  : بيانگر وضعيت بررسی نشده
  Error: بيانگر خطا در ارسال درخواست
  Timeout: بيانگر به پايان رسيدن مدت زمان ممكن براي اجراي درخواست
  Parseerror: بيانگر وضعيت مشكل در اجرا و خواندن درخواست
xhr: كه در بر گیرنده شی XmlHttpRequest مي باشد.

مثال:

$(document).ready(function(){
$("button").click(function(){
$("#test").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
 if(statusTxt=="success")
 alert(" اجراي متد با موفقيت انجام شد !");
 if(statusTxt=="error")
 alert("Error: "+xhr.status+": "+xhr.statusText);
 });
 });
});
</script>
</head>
<body>

<div id="test"><div>
<button> load تست رويداد  </button>

</body>

در اين مثال، با كليك بر روي دكمه، در صورت موفقيت آميز بودن اجراي متد load ، پيغام: " اجراي متد با موفقيت انجام شد "  و در صورت خطا، پيغام Error نمايشداده خواهد شد.

 

آموزش جیکوئری

رويداد unload:

اين رويداد زماني رخ مي دهد كه كاربر به دلايل مختلف مثل رفرش و يا بارگذاري مجدد صفحه،  كليك بر روي يك لينك براي رفتن به صفحه اي ديگر، تايپ آدرس جديد در نوار آدرس و فشردن كليد Enter و يا كليك بر روي دكمه هاي Forward يا Backward بر روي مرورگر از صفحه خارج شده و يا به صفحه ديگري برود. در اين هنگام، اين رويداد مي تواند توابعي را در هنگام بستن اجرا نمايد.

شكل كلي دستور:
 

$( selector ).unload( function ) ;

مثال:

<html>
<head>
<script src="jquery.js"></script></script>
<script>
$(document).ready(function(){
 $(window).unload(function(){
 alert("به اميد ديدار!");
 });
});
</script>
</head>
<body>
</body>
</html>


به اين نيز توجه داشته باشيد كه رويداد unload بايستي حتما با شي window بكار برود.

کلمات کلیدی