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

در این قسمت در مورد رویدادها (event ) ها بحث خواهیم کرد.

رویداد ( jquery event) چیست ؟

رویداد واکنشی است که به عکس العمل کاربر ایجاد می شوند. مثل کلیک کردن ، دابل کلیک ، درگ کردن و غیره.

می توان صفحه وب را طوری طراحی کرد که به هر عمل کاربر واکنش نشان دهد.

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

رویداد های (event) موس : کلیک – دابل کلیک – رفتن روی عنصر با موس – خارج شدن از روی عنصر

رویدادهای صفحه کلید : فشردن کلید – پایین رفتن کلید – بالا آمدن کلید

رویدادهای فرم : submit شدن فرم – تغییر – فعال شدن (focus) – خارج شدن از عنصر

رویدادهای پنجره (مرورگر یا صفحه) : لود شدن صفحه وب – تغییر سایز شدن صفحه – اسکرول – unload

چند مثال :

اختصاص دادن کلیک به تمامی پاراگراف ها در صفحه

$("p").click();

با استفاده از تابع پایین می توانید با کلیک روی هر پاراگراف آن را مخفی نمایید.

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

با حرکت روی پاراگراف متن بصورت پیغام نمایش داده می شود.

$(document).ready(function(){ $("#p1").mouseenter(function(){ alert("sh711.com"); }); });

هنگامی که روی پاراگراف می رویم و می خواهیم موس را از روی آن برداریم یعنی هنگام ترک آن ، پیغام نمایش داده می شود.

$(document).ready(function(){ $("#p1").mouseleave(function(){ alert("Bye! sh711.com "); }); });

با رفتن روی پاراگراف متن sh711.com نمایش داده می شود و هنگام ترک آن پیغام دوم نمایش داده می شود.

$(document).ready(function(){ $("#p1").hover(function(){ alert("sh711.com"); }, function(){ alert("Bye! You now leave p1!"); }); });

در پایین یک مثال کامل از رویدادها در جی کوئری آورده شده است.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>

نویسنده : هدایت عباسی

ثبت نظر