پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
با عرض سلام خدمت همراهان همیشگی وب سایت پرنیان طرح
با آموزش مبحث متد های Event در دوره ی آموزش های JQuery در خدمتتان هستیم.
کلیه اقدامات مختلف بازدید کنندگان که یک صفحه وب میتواند به آن ها پاسخ دهد رویداد ها خوانده میشوند.
جی کوئری به گونه ای طراحی شده است که روشی را که با آن جاوا اسکریپت را مینویسید تغییر دهید.
در ادامه این مطلب همراه پرنیان طرح باشید.
مقدمه
رویداد ها (events) اتفاقاتی هستند که بر روی عناصر موجود در صفحات وب شما انجام میشوند.
مانند رویداد هایی که هنگام کلیک کردن بر روی عناصر یا عبور از روی آن ها یا انتخاب یک Radio Button صورت میگیرد.
یک رویداد (event) نشانگر لحظه دقیق وقوع یک اقدام است.
اصطلاح آتش سوزی اغلب برای رویدادها استفاده میشود.
مانند لحظه ای که شما یک کلید را فشار میدهید و رویداد فشرده سازی کلید استخراج میشود.
نحو jQuery برای متدهای رویداد:
در jQuery بیشتر رویدادهای DOM از یک روش جی کوئری معادل برخوردار هستند.
برای اختصاص یک رویداد کلیک به همه پاراگراف های یک صفحه میتوانید این کار را انجام دهید:
قدم بعدی این است که مشخص کنید چه اتفاقی هنگام اجرای این رویداد شما باید رخ دهد.
شما باید عملکردی را به رویداد منتقل کنید.
معمولا از این متدهای رویداد Jquery استفاده میشود :
$(document).ready()
به ما امکان میدهد وقتی یک سند به طور کامل بارگیری میشود ، یک عملکرد را اجرا کنیم.
dblclick():
عملکرد یک رویداد کنترل کننده را به یک عنصر html متصل میکند.
این عملکرد هنگامی اتفاق میفتد که کاربر روی عنصر html دوبار کلیک کند.
مثال :
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“p”).dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
[/php]
میتوانید خروجی این مثال را در این لینک ببینید.
mouseenter():
این عملکرد یک رویداد کنترل کننده را به یک عنصر html متصل میکند.
این عملکرد هنگامی که نشانگر ماوس روی عنصر html قرار میگیرد انجام میشود.
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“#p1”).mouseenter(function(){
alert(“You entered p1!”);
});
});
</script>
</head>
<body>
<p id=”p1″>Enter this paragraph.</p>
</body>
[/php]
میتوانید خروجی این مثال را در این لینک ببینید.
mouseleave():
این عملکرد یک رویداد کنترل کننده را به یک عنصر html متصل میکند.
این عملکرد هنگامی انجام میشود که نشانگر ماوس عنصر html را ترک میکند.
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“#p1”).mouseleave(function(){
alert(“Bye! You now leave p1!”);
});
});
</script>
</head>
<body>
<p id=”p1″>This is a paragraph.</p>
</body>
[/php]
خروجی مثال بالا را در این لینک ببینید.
mousedown():
این متد یک رویداد کنترل کننده را به یک عنصر html متصل میکند.
وقتی دکمه سمت چپ ، راست یا میانه ماوس را فشار میدهید ، این عملکرد اجرا می شود.
در حالی که ماوس بالای عنصر html است.
مثال :
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“#p1”).mousedown(function(){
alert(“Mouse down over p1!”);
});
});
</script>
</head>
<body>
<p id=”p1″>This is a paragraph.</p>
</body>
[/php]
خروجی مثال بالا را در این لینک ببینید.
mouseup():
این متد یک رویداد کنترل کننده را به یک عنصر html متصل میکند.
وقتی دکمه ی سمت چپ ، راست یا میانه را ماوس آزاد شد این عملکرد اجرا می شود در حالی که ماوس روی عنصر html قرار دارد.
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“#p1”).mouseup(function(){
alert(“Mouse up over p1!”);
});
});
</script>
</head>
<body>
<p id=”p1″>This is a paragraph.</p>
</body>
[/php]
خروجی مثال بالا را در این لینک ببینید.
hover():
این متد یک رویداد کنترل کننده را به یک عنصر html متصل میکند.
اولین عملکرد هنگامی که ماوس وارد عنصر html میشود و عملکرد دوم هنگام خروج ماوس از عنصر html اجرا می شود.
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/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>
[/php]
خروجی مثال بالا را در این لینک ببینید.
focus():
این متد یک رویداد کنترل کننده را به یک عنصر html متصل میکند.
این عملکرد هنگامی انجام می شود که روی قسمت فیلد فرم متمرکز شود.
مثال :
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“input”).focus(function(){
$(this).css(“background-color”, “yellow”);
});
$(“input”).blur(function(){
$(this).css(“background-color”, “green”);
});
});
</script>
</head>
<body>
Name: <input type=”text” name=”fullname”><br>
Email: <input type=”text” name=”email”>
</body>
[/php]
خروجی مثال بالا را در این لینک ببینید.
blur():
این متد یک رویداد کنترل کننده را به یک عنصر html متصل میکند.
این عملکرد هنگامی اجرا میشود که تمرکز از روی فیلد فرم برداشته میشود.
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“input”).focus(function(){
$(this).css(“background-color”, “yellow”);
});
$(“input”).blur(function(){
$(this).css(“background-color”, “green”);
});
});
</script>
</head>
<body>
Name: <input type=”text” name=”fullname”><br>
Email: <input type=”text” name=”email”>
</body>
[/php]
خروجی این مثال را در این لینک ببینید.
The on() Method :
این متد برای عناصر انتخاب شده یک یا تعداد بیشتری از برگزار کننده رویداد را ضمیمه میکند.
یک رویداد کلیک را به یک عنصر p وصل میکند.
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“p”).on(“click”, function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
[/php]
خروجی این مثال را در این لینک ببینید.
