رویدادها در جیکوئری
مقدمه
درود و خسته نباشید خدمت شما علاقه مندان به آموزش برنامه نویسی و مخصوصا آموزش جی کوئری.
در جلسه قبلی با انتخاب گرها در جی کوئری آشنا شدیم و در این جلسه به آموزش رویدادها در جیکوئری می پردازیم.
رویداد در جیکوئری چیست ؟
به زبان ساده هنگامی که شما یک صفحه وب را باز می کنید اتفاقاتی از سوی مرورگر و از سمت شما روی صفحه روی می دهد که به این اتفاقات در اصطلاح رویداد یا event می گویند. برای مثال هنگامی که صفحه به طور کامل بارگزاری می شود این خود یک رویداد است که توسط مروگر انجام شده است (رویداد ready که قبلا با آن آشنا شدیم) و یا کلیه عملیات هایی که با موس یا صفحه کلید انجام میدهید خود یک رویداد هستند. مانند کلیک کردن با موس، تکان دادن موس و فشردن یک دکمه از کیبورد و غیره. همچنین با ورود نسل جدید پردازشگرها در آینده رویدادهای جدیدی نیز اضافه خواهند شد. مانند نگاه کردن به صفحه وب یا تمرکز ذهنی روی عنصری از وب.
از رویدادها در جی کوئری استفاده های زیادی می شود. زیرا معمولا بعد از انتخاب یک عنصر بایستی رویدادی که روی آن عنصر انجام میشود را مدیریت کنیم. در ادامه این مطلب با پرکاربردترین رویدادها در جیکوئری آشنا میشویم.
رویداد ready
در مورد این رویداد در مبحث معرفی رویداد ready در جیکوئری به طور کامل صحبت شد. این رویداد هنگامی که انتخابگر به صورت کامل بارگزاری یا لود شود توابع یا دستوراتی را اجرا می کند. در حالت زیر هنگامی که صفحه سند html به صورت کامل لود شد کلیه دستورات خود را اجرا می کند.
$(document).ready(function(){
.
.
.
})
یکی از روش های مدیریت رویدادها برای عناصر انتخاب شده به این صورت است که پس از انتخاب عنصر یک نقطه یا دات (.) قرار داده و بعد از آن نام رویداد مورد نظر را می آوریم.
حال به معرفی و توضیح مهمترین رویدادهایی که با موس انجام میشود می پردازیم.
رویداد click
همان طور که از نام رویداد click پیداست این رویداد زمانی اتفاق میفتد که کاربر روی عنصری کلیک کند. مثلا در مثال زیر کاربر هنگامی که روی تگ <p> کلیک می کند و پیام اخطار به او نمایش داده می شود.
$('p').click(function(){
alert('clicked on p');
})
رویداد dbclick
این رویداد هم یکی از رویدادهای مربوط به موس می باشد و زمانی اتفاق میفتد که کاربر 2بار همزمان روی عنصر انتخاب شده کلیک می کند. در مثال زیر وقتی کاربر روی عنصر <p> دو بار کلیک کند پیام اخطار به او نمایش داده می شود.
$('p').dbclick(function(){
alert('double clicked on p');
})
رویداد mouseover
رویداد mouseover زمانی اتفاق میفتد که کاربر نشانه گر موس خود را روی عنصر انتخاب شده هدایت کند. هنگامی که کاربر روی فرزندان این عنصر انتخاب شده هم موس خود را حرکت دهد این رویداد اتفاق خواهد افتاد. در مثال زیر هنگامی که کاربر موس خود را روی تگ <div> ببرد پیام اخطار به اون نمایش داده خواهد شد. این در حالی ست که پیام اخطار زمانی که کاربر موس خود را روی تگ <p> که فرزند این <div> می باشد می برد مجددا پیام اخطار به اون نمایش داده می شود.
Html
<div style="padding: 20px;background: red;">
<p style="padding: 20px;background: blue;">
this is p and child of div
</p>
</div>
Jquery
$(document).ready(function(){
$('div').mouseover(function(){
alert('double clicked on p');
})
})
رویداد mouseenter
این رویداد مانند رویداد mouseover عمل می کند با این تفاوت که فقط برای عنصر انتخاب شده اتفاق میفند و برای فرزندان آن عنصر عمل نمی کند
Html
<div style="padding: 20px;background: red;">
<p style="padding: 20px;background: blue;">
this is p and child of div
</p>
</div>
Jquery
$(document).ready(function(){
$('div'). mouseenter (function(){
alert('double clicked on p');
})
})
رویداد mouseout
این رویداد زمانی اتفاق میفتد که کاربر نشانه گر موس خود را از روی عنصر انتخاب شده به خارج از آن هدایت کند. هنگامی که کاربر از روی فرزندان این عنصر انتخاب شده هم موس خود را خارج کند این رویداد اتفاق خواهد افتاد. در مثال زیر هنگامی که کاربر موس خود را از روی تگ <div> خارج کند پیام اخطار به اون نمایش داده خواهد شد. این در حالی ست که پیام اخطار زمانی که کاربر موس خود را از روی تگ <p> که فرزند این <div> می باشد نیز خارج می کند مجددا پیام اخطار به اون نمایش داده می شود. این رویداد کاملا برعکس رویداد mouseover عمل می کند.
$(document).ready(function(){
$('div').mouseout(function(){
alert('double clicked on p');
})
})
رویداد mouseleave
این رویداد مانند رویداد mouseout عمل می کند با این تفاوت که فقط برای عنصر انتخاب شده اتفاق میفند و برای فرزندان آن عنصر عمل نمی کند. این رویداد برعکس رویداد mouseenter عمل می کند.
$(document).ready(function(){
$('div').mouseleave(function(){
alert('double clicked on p');
})
})
رویداد hover
رویداد hover از ترکیب دو رویداد mouseenter و mouseleave تشکیل شده است. این رویداد از دو تابع تشکیل شده است که دو نوع حالت موس را مدیریت می کند. تابع اول هنگامی اجرا می شود که کاربر نشانه گر موس خود را روی عنصر انتخاب شده هدایت می کند و تابع دوم هنگامی اجرا می شود که کاربر موس خود را از روی عنصر مورد نظر به خارج از آن هدایت کند. در مثال زیر هنگامی که کاربر موس را روی تگ <p> می برد پیام “Hello dear user” به او نمایش داده می شود و هنگامی که موس خود را به خارج از آن هدایت می کند پیام “Bye dear user” به او نمایش داده میشود.
$("p").hover(function(){
alert("Hello dear user");
},
function(){
alert("Bye dear user");
});
نظرات کاربران