یادگیری جاوا. رویدادهای ماوس جاوا اسکریپت

ما به یادگیری jQuery ادامه می دهیم و اکنون بیایید مطالعه بخشی مانند مدیریت رویداد در jQuery را شروع کنیم.

رویدادهای مستند
هنگامی که یک کاربر با یک صفحه وب در تعامل است، رویدادهایی رخ می دهد. رویدادها نوعی اعلان به سیستم هستند مبنی بر اینکه کاربر عملی را انجام داده یا شرایطی در خود سیستم رخ داده است. رویدادها در نتیجه کلیک کردن روی یک عنصر، حرکت ماوس، فشار دادن یک کلید روی صفحه کلید، تغییر اندازه یک پنجره، پایان بارگیری یک صفحه وب و غیره فعال می شوند. با دانستن اینکه یک عنصر خاص از یک صفحه وب چه رویدادهایی می تواند ایجاد کند، می توانید یک تابع برای مدیریت این رویداد بنویسید. به عنوان مثال، هنگام ارسال داده های فرم، رویداد onsubmit فعال می شود. هنگامی که این رویداد رخ می دهد، می توانید داده های وارد شده توسط کاربر را تأیید کنید و اگر با آنچه شما انتظار دارید مطابقت نداشت، ارسال داده ها را متوقف کنید.

در همان ابتدای کتاب، امکان اجرای اسکریپت‌ها بلافاصله پس از شکل‌گیری ساختار سند، بدون انتظار برای بارگذاری سایر عناصر را در نظر گرفتیم. همانطور که می دانید، می توانید این رویداد را با استفاده از روش آماده () مدیریت کنید.

alert("سند برای اجرای اسکریپت موجود است");
});

اگر فقط پس از بارگیری کامل خود سند HTML و همچنین سایر عناصر (مثلاً تصاویر) نیاز به انجام برخی اقدامات دارید، می توانید از روش بارگذاری () استفاده کنید. سینتکس روش به شرح زیر است.

بارگذاری (عملکرد پاسخ به تماس)

تابع<Название функции>([شیء رویداد]) (
// ...
}

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

$(window).load(تابع(ها) (
alert ("سند به طور کامل بارگیری شده است");
alert("نوع رویداد" + e.type);
});

در نتیجه اجرا دو پیام دریافت خواهیم کرد.

سند به طور کامل بارگذاری شده است
نوع رویداد بارگیری

روش unload () برای انجام هر عملی بلافاصله قبل از تخلیه سند در نظر گرفته شده است. این روش دارای نحو زیر است.
تخلیه (عملکرد پاسخ به تماس)

پارامتر تابع Callback ارجاع به تابعی با فرمت زیر را مشخص می کند.

تابع<Название функции>([<Объект event>]) {
// ...
}
نمایش یک پیام قبل از تخلیه سند.
$(window).unload(function()
( هشدار("بیا داخلهنوز!");
});

در این بخش، دو روش مفید دیگر را بررسی خواهیم کرد.

تغییر اندازه (عملکرد پاسخ به تماس) - زمانی که اندازه پنجره تغییر می کند اجرا می شود.

اسکرول (عملکرد برگشت به تماس) - زمانی که محتوای یک عنصر صفحه، سند، پنجره یا قاب پیمایش می شود اجرا می شود.

پارامتر تابع Callback ارجاع به تابعی با فرمت زیر را مشخص می کند.
نام تابع تابع ([شیء رویداد]) (
// ...
}

می توانید پیمایش محتوای پنجره را پردازش کنید و پیامی مانند این را نمایش دهید.
$(window).scroll(function() (
alert("محتوای پنجره پیمایش");
});

به عنوان مثالی از استفاده از متد resize()، عرض و ارتفاع پنجره را پس از تغییر اندازه دریافت می کنیم (فهرست 6.1).

لیست 6.1. نمایش عرض و ارتفاع پنجره هنگام تغییر اندازه

هنگامی که اندازه پنجره تغییر می کند، عنصر divl عرض و ارتفاع پنجره را نمایش می دهد.

روش خطا (Callback Function) زمانی فراخوانی می شود که خطایی در صفحه یا کد جاوا اسکریپت وجود داشته باشد. پارامتر تابع Callback ارجاع به تابعی با فرمت زیر را مشخص می کند.

نام تابع تابع ([پیام[، URL[، شماره خط]]])(
// ...
}

اگر خطا در شی پنجره رخ داده باشد، سه پارامتر در تابع callback در دسترس خواهد بود:

پیام - متنی که خطا را توصیف می کند.
URL - URL کامل سند با خطا؛
شماره خط - شماره خط با خطا.

برای پنهان کردن خطاهای جاوا اسکریپت از کاربران، مقدار true را در داخل تابع callback برگردانید.

$(window).error(function()(
بازگشت درست؛
});

با استفاده از روش error() می توانید خطای بارگذاری تصویر را مدیریت کنید.

$("img").error(function() (
$(this).attr("src", "noimage.gif");
});

توجه داشته باشید
برای اینکه این مثال به درستی کار کند، باید اسکریپت را روی سرور قرار دهید. در غیر این صورت، رویداد ترتیب اثر داده نخواهد شد.

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

روش های زیر برای مدیریت رویدادهای ماوس در جی کوئری ارائه شده است.

کلیک ([Callback Function]) - زمانی اجرا می شود که یک عنصر یا صفحه وب کلیک شود. اگر پارامتر مشخص نشده باشد، یک کلیک روی عنصر شبیه سازی می شود. قبل از رویداد onclick دو رویداد وجود دارد: onmousedown و onmouseup. پس از کلیک بر روی هر دکمه، یک پیام نمایش داده شود.
$("ibutton").click(function() (
});

Toggle() - به شما امکان می دهد تا زمانی که روی یک عنصر یا صفحه وب کلیک می کنید، بین چندین عملکرد متناوب کنید. توابع به نوبه خود فراخوانی می شوند. اولین کلیک تابع اول، کلیک دوم تابع دوم و کلیک سوم تابع سوم را فراخوانی می کند. اگر تابع سوم تعریف نشده باشد، تابع اول دوباره فراخوانی می شود و به همین ترتیب. متد toggle() فرمت زیر را دارد.
تغییر وضعیت(<Функция обратного вызова 1>,
<Функция обратного вызова 2>[,
<Функция обратного вызова N>])

بیایید رنگ متن پاراگراف را بعد از هر کلیک ماوس تغییر دهیم.
$("p"). toggle
(تابع() (
$(this).css("رنگ"، "قرمز");
تابع() (
$(this).css("رنگ"، "آبی");
تابع() (
$(this).css("رنگ"، "سبز");
}
) .کلیک()؛

سعی کنید چند بار روی پاراگراف کلیک کنید. رنگ متن به ترتیب از قرمز به آبی، از آبی به سبز، دوباره از سبز به قرمز تغییر می کند. به خط آخر مثال توجه کنید. پس از اختصاص‌دهنده رویداد، رویداد onclick با متد ()click بدون هیچ پارامتری اجرا می‌شود. به همین دلیل رنگ پاراگراف از همان ابتدا قرمز خواهد بود.

Dblclick([Callback Function]) - زمانی اجرا می شود که یک عنصر یا صفحه وب دوبار کلیک شود. اگر پارامتر مشخص نشده باشد، یک دوبار کلیک روی عنصر شبیه سازی می شود. قبل از رویداد ondblclick سه رویداد وجود دارد: onmousedown، onmouseup و onclick. هنگامی که روی هر پاراگراف دوبار کلیک می کنید پیامی را نمایش دهید.
$("p").dblclick(function() (
alert("شما دوبار کلیک کردید");
});

mousedown (عملکرد Callback) - زمانی که دکمه ماوس روی یک عنصر یا صفحه فشار داده می شود اجرا می شود. رویداد onmousedown قبل از رویداد onmouseup و onclick رخ می دهد.

موس (عملکرد برگشت به تماس) - زمانی اجرا می شود که دکمه قبلی ماوس را فشار داده اید آزاد کنید. رویداد onmouseup بین رویدادهای onmousedown و onclick رخ می دهد. هنگامی که روی یک پاراگراف کلیک می کنید و دکمه ماوس را رها می کنید، پیام ها را نمایش دهید.

$("p").mousedown(function() (
$("#divl").append("رویداد Onmousedown" + "
");
))موشواره(تابع() (
$("#divl").append("رویداد Onmouseup" + "
");
});
<р>مرا کلیک کن

Mousemove (عملکرد برگشت به تماس) - هر زمان که ماوس جابجا شود اجرا می شود. هنگامی که مکان نما را روی یک پاراگراف حرکت می دهید یک پیام نمایش داده شود.

$("p") .mousemove(function() (
$("#divl").append("رویداد Onmousemove" + "
");
});

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

mouseout (عملکرد Callback) - زمانی اجرا می شود که نشانگر ماوس عنصر را ترک می کند. زمانی که ماوس را روی لینک قرار می دهید، رنگ پیوند را قرمز کنید و پیامی را نمایش دهید و زمانی که مکان نما از لینک خارج شد، رنگ آن را به سیاه تغییر دهید و پیامی را نمایش دهید.

$("amouseover(function() (
$(this).css("رنگ"، "قرمز");
$("#divl").append("رویدادروی موشواره" + "
");
)) mouseout(function() (
$(this).css("رنگ"، "سیاه");
$("#divl").append("رویدادonmouseout" + "
");
}>;

hover() - به شما امکان می دهد شناور و شناور یک عنصر را با یک متد مدیریت کنید. فرمت زیر را دارد.
شناور (بازخوانی رویداد Onmouseover، پاسخ تماس رویداد onmouseout)

بیایید مثال قبلی خود را بازنویسی کنیم و از متد hover() استفاده کنیم.

$("a").hover(function() (
$(this).css("رنگ"، "قرمز");
$("#divl").append("رویداد Onmouseover" + "
"); },
تابع() (
$(this).css("رنگ"، "سیاه");
$("#divl").append("رویداد Onmouseout" + "
");
});

استفاده از متد hover() مزیت دیگری نیز دارد. اگر بلوک دیگری در داخل بلوک وجود داشته باشد، هنگام ورود به بلوک داخلی و همچنین هنگام خروج از آن، توابع جداگانه فراخوانی می شود. هنگام استفاده از متد ()hover، این حرکات نادیده گرفته می شوند (لیست 6.2).

لیست 6.2. ویژگی های استفاده از روش شناور()

جداگانه، مجزاکنترل کننده ها:

خط 1

خط 2

تابعشناور ():

خط 1

خط 2

برای اولین بلوک تودرتو، کنترل‌کننده‌های رویداد جداگانه را تعریف کردیم. اگر نشانگر ماوس را روی کل بلوک در وسط حرکت دهیم، دنباله رویدادهای زیر را دریافت می کنیم.
رویداد onmouseover
رویداد onmouseout
رویداد onmouseover
رویداد onmouseout
رویداد onmouseover
رویداد onmouseout

برای دومین بلوک تودرتو، کنترل‌کننده‌های رویداد با استفاده از متد hover() اختصاص داده می‌شوند. با همین عمل فقط دو رویداد دریافت خواهیم کرد.
رویداد onmouseover
رویداد onmouseout

در تمام متدهای این بخش، ما هنوز پارامتری را که بتوان به آن‌ها منتقل کرد، مشخص نکرده است.

// ...
}

عنصری که رویداد را اجرا کرده است در داخل تابع از طریق این نشانگر قابل دسترسی است. توجه داشته باشید که این اشاره گر به عنصری در Document Object Model اشاره دارد، نه عنصری در مجموعه jQuery. اگر متغیری در پارامتر شئ رویداد مشخص شده باشد، از طریق آن می توانید به خصوصیات شی رویداد دسترسی پیدا کنید. بیایید یک کنترل کننده کلیک ماوس برای دو عنصر به طور همزمان بنویسیم. پس از کلیک کردن، نام تگ را در عنصر با id divl نمایش دهید.

$("r, div").کلیک کنید(function(e) {
$("#divl")
.append("عنصر" + e.srcElement.tagName + "
");
});

رویدادهای صفحه کلید در جی کوئری

روش های زیر برای مدیریت رویدادهای صفحه کلید در jQuery ارائه شده است.

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

keyprcss (عملکرد برگشت به تماس) - با فشار دادن یک کلید صفحه کلید اجرا می شود. شبیه به متد ()keydown، اما مقدار کد کاراکتر را در یونیکد برمی‌گرداند. رویداد به طور مداوم فعال می شود تا زمانی که کاربر کلید را رها کند.

keyup (عملکرد برگشت به تماس) - زمانی اجرا می شود که کلید صفحه کلید قبلاً فشرده شده رها شود.

پارامتر تابع callback اشاره ای به تابعی با فرمت زیر است.

نام تابع تابع ([شیء رویداد]) (
// ...
}

اگر متغیری در پارامتر شئ رویداد مشخص شده باشد، از طریق آن می توانید به خصوصیات شی رویداد دسترسی پیدا کنید. به عنوان مثال برای دریافت کد کلیدی که فشار داده شده است می توانید از خاصیت کلید Code استفاده کنید. به عنوان مثال، ما کد کلید فشرده شده را دریافت می کنیم و دنباله رویدادها را نشان می دهیم (فهرست 6.3).

لیست 6.3. رویدادهای صفحه کلید

فیلد متن را برجسته کنید و هر کلیدی را در صفحه کلید فشار دهید. برای مثال، بیایید کلید A را با طرح صفحه کلید روسی فشار دهیم. در نتیجه پیام زیر را دریافت می کنیم.
کلید 70
keyprcss 1072
کلید 7 0

رویدادها را در jQuery تشکیل دهید

روش های زیر برای مدیریت رویدادهای فرم طراحی شده اند.

تمرکز ([Callback]) - زمانی اجرا می‌شود که عنصر فرم فوکوس را دریافت کند. اگر پارامتر مشخص نشده باشد، عنصر فوکوس ورودی را دریافت می کند.

blur([Callback]) - زمانی که عنصر فرم فوکوس خود را از دست می دهد فعال می شود. اگر پارامتر مشخص نشده باشد، عنصر فوکوس ورودی را از دست می دهد.

تغییر (عملکرد برگشت به تماس) - زمانی اجرا می شود که داده ها در قسمت متن تغییر می کنند و تمرکز به عنصر فرم دیگری منتقل می شود، یا زمانی که داده های فرم ارسال می شود.

ارسال ([عملکرد پاسخ به تماس]) - زمانی که داده‌های فرم ارسال می‌شوند اجرا می‌شود. اگر پارامتر مشخص نشده باشد، فرم ارسال می شود.

select([ تابع فراخوانی]) - زمانی اجرا می شود که محتوای یک عنصر انتخاب شده باشد. اگر پارامتر مشخص نشده باشد، محتوای عنصر به طور کامل انتخاب می شود.

پارامتر تابع callback اشاره ای به تابعی با فرمت زیر است.

نام تابع تابع ([شیء رویداد]) (
// ...
}

عنصری که رویداد را اجرا کرده است در داخل تابع از طریق این نشانگر قابل دسترسی است. توجه داشته باشید که این اشاره گر به عنصری در Document Object Model اشاره دارد، نه عنصری در مجموعه jQuery. اگر متغیری در پارامتر شئ رویداد مشخص شده باشد، از طریق آن می توانید به خصوصیات شی رویداد دسترسی پیدا کنید.

بیایید نحوه مدیریت رویدادهای فرم های مختلف را نشان دهیم (فهرست 6.4).

پاراگراف 1
پاراگراف 2
پاراگراف 3
پاراگراف 4




!}

id="btn2">

!}