رویدادها در jQuery

در قسمت قبلی با سلکتورهای jQuery آشنا شدیم. در این بخش از سری آموزش جی کوئری قصد داریم به شما نحوه مدیریت رویدادها در jQuery را آموزش بدیم.

رویداد (Event) چیست

رویدادها معمولا بوسیله تعامل با کاربر در صفحه وب ایجاد (به اصطلاح شلیک (triggered) ) می شوند.

برای مثال زمانی که روی یک لینک یا دکمه کلیک می شود, متنی در باکس متن وارد می شود, انتخاب یک گزینه, فشردن دکمه کیبورد, حرکت اشاره گر ماوس و …

در بعضی موارد, خود مرورگر می توانید رویدادی را شلیک کند مثلا رویدادهای لود شدن یا لود نشدن صفحه.

جی کوئری مکانیزم مدیریت رویدادها را با ارایه متدهای رویداد برای بیشتر رویدادهای مرورگر بومی, افزایش می دهد.

بعضی از این متد رویدادها در jQuery شامل ready(), click(), keypress(), focus(), blur(), change() می باشند.

برای مثال برای اجرای کد جاوا اسکریپت در زمانی که DOM آماده است, از متد ready() در جی کوئری بصورت زیر استفاده می کنیم :

<script type="text/javascript">
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

$(document).ready(function(){

// Code to be executed

alert("Hello World!");

});

</script>

نکته: $(document).ready() یک رویداد است که برای دستکاری صفحه بصورت امن با jQuery استفاده می شود. کد داخل این رویداد فقط یکبار زمانی اجرا می شود که DOM کاملا لود شده و آماده است.

بطور کلی, رویداد ها به چهار گروه اصلی دسته بندی می شود :

رویدادهای ماوس, رویدادهای کیبورد, رویدادهای فرم و رویدادهای های سند/پنجره (document/window)

بخش زیر به شما یک خلاصه کوتاه از همه این رویدادهای مرتبط با متدهای جی کوئری را بصورت تک به تک می دهد.

رویدادهای ماوس

یک رویداد ماوس (mouse event) زمانی ایجاد می شد که کاربر روی المانی کلیک کند یا اشاره گر ماوس را حرکت دهد و …

در اینجا بعضی از پرکاربردترین متدهای jQuery برای مدیریت رویدادهای ماوس را آوردیم.

متد click()

متد click() در جی کوئری یک تابع مدیریت رویداد را به المان های انتخاب شده برای رویداد “کلیک” متصل (attach) می کند.

این تابع متصل شده هنگام کلیک کاربر روی آن عنصر اجرا می شود.

مثال زیر المان های <p> را در صفحه و هنگامی که روی آن ها کلیک می شود را با افکت اسلاید مخفی می کند.

<script type="text/javascript">
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>

$(document).ready(function(){

$("p").click(function(){

$(this).slideUp();

});

</script>

نکته: کلمه کلیدی this در تابع مدیریت رویداد jQuery یک رفرنس به عنصری است که در حال حاضر روی آن کار می شود.

متد dblclick()

متد dblclick() در جی کوئری یک تابع مدیریت رویداد را به المان های انتخاب شده برای رویداد “دابل کلیک” متصل (attach) می کند.

این تابع متصل شده هنگام دوبار-کلیک کاربر روی آن عنصر اجرا می شود.

مثال زیر المان های <p> را در صفحه و هنگامی که روی آن ها دابل-کلیک می شود را با افکت اسلاید مخفی می کند.

<script type="text/javascript">
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>

$(document).ready(function(){

$("p").dblclick(function(){

$(this).slideUp();

});

</script>

متد hover()

متد hover() در جی کوئری یک یا دو تابع مدیریت رویداد را به المان های انتخاب شده در زمانی که اشاره گر ماوس وارد یا خارج محدوده المان می شود را متصل می کند.

اولین تابع زمانی که اشاره گر ماوس روی المان قرار می گرد اجرا می شود, درحالی که تابع دومی زمانی که کاربر اشاره گر ماوس را از روی المان بر می دارد اجرا می شود.

مثال زیر المان های <p> را زمانی که ماوس روی آن قرار می گیرد هایلایت می کند و با برداشتن ماوس روی آن, هایلایت حذف می شود.

<script type="text/javascript">
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>

$(document).ready(function(){

$("p").hover(function(){

$(this).addClass("highlight");

}, function(){

$(this).removeClass("highlight");

});

</script>

نکته: می توانید متد hover() را ترکیلی از دو متد mouseenter() و mouseleave() در نظر بگیرید.

متد mouseenter()

متد mouseeenter() یک تابع مدیریت رویداد به المان های انتخاب شده را در زمانی که ماس روی المان قرار می گیرد, متصل می کند.

در مثال زیر, زمانی که اشاره گر ماوس روی عنصر قرار می گیرد, یک کلاس highlight را به المان <p> اضافه می کند.

<script type="text/javascript">
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>

$(document).ready(function(){

$("p").mouseenter(function(){

$(this).addClass("highlight");

});

</script>

متد mouseleave()

متد mouseleave() در جی کوئری, یک تابع مدیریت رویداد را به المان های انتخاب شده در زمانی که ماوس از روی المان خارج می شود را متصل می کند.

مثال زیر کلاس highlight را از المان <p> در زمانی که اشارگر ماوس از روی آن برداشته می شود را حذف می کند.

<script type="text/javascript">
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>

$(document).ready(function(){

$("p").mouseleave(function(){

$(this).removeClass("highlight");

});

</script>

امیدوارم از بخش اول رویدادها در jQuery نهایت استفاده را برده باشید. در قسمت بعدی, باقی رویدادهای مهم جی کویری مثل کیبورد, فرم و … را بررسی می کنیم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

رویدادها در jQuery – بخش اول

رویداد (Event) چیست

رویدادهای ماوس

متد click()

متد dblclick()

متد hover()

متد mouseenter()

متد mouseleave()

ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP

رویدادها در jQuery – بخش دوم

آموزش جی کوئری – سلکتورها در jQuery (انتخاب گرها)

آموزش جی کوئری – مقدمه

لغو پاسخ

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

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه