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

آموزش jQuery قسمت چهارم- رویدادها در جی کوئری

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

jQuery Event

رویداد چیست؟

تمام اتفاقاتی که در یک صفحه وب رخ می دهد و می توانیم به آن ها پاسخ دهیم رویداد (Event) محسوب می شوند مثل:

حرکت ماوس روی یک عنصر
انتخاب یک دکمه
کلیک روی یک دکمه

تعدادی از رویدادهای عمومی DOM

Document/Window Events	Form Events	Keyboard Events	Mouse Events
load	submit	keypress	click
resize	change	keydown	dblclick
scroll	focus	keyup	mouseenter
unload	blur		mouseleave

نحوه استفاده از رویدادها

$("p").click();

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

$("p").click(function(){ 
  // دستورات مورد نظر 
});

رویدادهای رایج جی کوئری رویداد ()ready

$(document).ready()

با استفاده از این متد، دستورات تابع تنها بعد از بارگذاری کامل صفحه اجرا خواهند شد که این امر از تداخل و اجرای نادرست کدها جلوگیری می کند

رویداد ()click

وقتی کاربر روی یک عنصر HTML کلیک کند این تابع اجرا خواهد شد. مثال: مخفی شدن پاراگرافی که کاربر روی آن کلیک کرده

$("p").click(function(){ 
    $(this).hide(); 
});

رویداد ()dblclick

زمانی که کاربر روی عنصری دوبار کلیک کند این رویداد فراخوانی می شود مثال: مخفی شدن پاراگرافی که کاربر روی آن دابل کلیک کرده

$("p").dblclick(function(){ 
    $(this).hide(); 
});

رویداد ()mouseenter

این تابع زمانی که نشانگر ماوس بر روی یک عنصر قرار بگیرد اجرا می شود مثال:

$("#para").mouseenter(function() {
    alert("You entered para!");
});

رویداد ()mouseleave

این تابع زمانی که نشانگر ماوس از روی عنصر مورد نظر برداشته شود اجرا خواهد شد مثال:

$("#para").mouseleave(function() {
    alert("Bye! You now leave para!");
});

رویداد ()mousedown

این تابع زمانی که دکمه چپ، وسط و یا دکمه راست ماوس فشرده شود اجرا می شود مثال:

$("#para").mousedown(function() {
    alert("Mouse down over para!");
});

رویداد ()mouseup

زمانی که دکمه چپ، وسط و یا راست ماوس رها شود این تابع اجرا خواهد شد مثال:

$("#para").mouseup(function() {
    alert("Mouse up over para!");
});

رویداد ()hover

زمانی که نشانگر ماوس بر روی یک عنصر قرار گرفت تابع اول و هنگامی که نشانگر ماوس از روی آن عنصر برداشته شود تابع دوم اجرا خواهد شد مثال:

$("p").hover(function() {
    alert("You entered paragraph");
}, function() {
    alert("Bye! You now leave paragraph");
});

رویداد ()focus

زمانی که کاربر روی یک عنصر ورودی فرم (مثل Input) کلیک کرده باشد (علامت چشمک زن داخل کادر ورود باشد) این تابع اجرا خواهد شد مثال:

$("input").focus(function() {
    $(this).css("background-color", "#CCCCCC");
});

رویداد ()blur

زمانی که یک فیلد ورودی از حالت focus خارج شود این تابع اجرا می شود مثال:

$("input").blur(function() {
    $(this).css("background-color", "#ffffff");
});

متد ()on

با استفاده از این متد می توان چندین رویداد را به یک عنصر اختصاص داد مثال:

$("p").on({
    mouseenter: function() {
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function() {
        $(this).css("background-color", "lightblue");
    },
    click: function() {
        $(this).css("background-color", "yellow");
    }
});

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

مشاهده قسمت های قبلی

قسمت اول: معرفی جی کوئری

قسمت دوم: شروع کار با جی کوئری

قسمت سوم: ساختار دستورات و انتخابگرها در jQuery

آموزش jQuery قسمت چهارم- رویدادها در جی کوئری

دیدگاهی وجود ندارد