متد bind() در jQuery
دسته بندی : آموزش jQuery سطح مقاله : متوسط زمان مطالعه : 3 دقیقه آخرین بروز رسانی: 11 خرداد 1401متد bind() در jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی میشود. متد bind( type, [data], fn ) یک handler را به یک یا چند رویداد (مانند کلیک) برای هر عنصر منطبق متصل میکند. همچنین میتواند رویدادهای سفارشی را پیوند دهد، مقادیری که میتوان برای این متد در نظر گرفت محو کردن، فوکوس، تغییر اندازه، اسکرول، بارگیری، کلیک و… هستند.
ساختار متد bind() در jQuery
در اینجا نحو و ساختار ساده برای استفاده از این متد آمده است:
selector.bind( type, [data], fn )
پارامترهای متد bind( type, [data], fn ) در jQuery
در اینجا تمام پارامترهای استفاده شده توسط این متد توضیح داده شده است:
- type : یک یا چند نوع رویداد که با یک فاصله از هم جدا شدهاند
- data : این پارامتر اختیاری است و نشان دهنده دادههای اضافی است که به عنوان event.data به کنترل کننده رویداد ارسال میشوند
- fn : تابعی برای اتصال به رویداد در هر یک از مجموعه عناصر منطبق
مثال
در قطعه کد زیر با یک مثال ساده نشان داده شده است که استفاده از این متد چگونه است. این متد در اینجا رویداد کلیک را با هر عنصر <div> پیوند میدهد:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$('div').bind('click', function( event ){
alert('Hi there!');
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>
مرجع رویدادها در jQuery – متدهای دستکاری رویداد
جدول زیر متدهای مهم مرتبط با رویداد را فهرست میکند:
متد | شرح |
bind() | یک کنترل کننده را به یک یا چند رویداد (مانند کلیک) برای هر عنصر منطبق متصل میکند، همچنین میتواند رویدادهای سفارشی را پیوند دهد |
off() | این کار برعکس live را انجام میدهد، یک رویداد live محدود را حذف میکند |
hover() | شبیه سازی شناور کردن؛ به عنوان مثال حرکت ماوس روی یک شی برای خاموش یا روشن کردن آن |
on() | یک کنترل کننده را به یک رویداد (مانند کلیک) برای همه عناصر منطبق با عنصر فعلی و آینده متصل میکند همچنین میتواند رویدادهای سفارشی را پیوند دهد |
one() | یک کنترل کننده را به یک یا چند رویداد متصل میکند تا برای هر عنصر منطبق یک بار اجرا شود |
ready() | تابعی را متصل میکند تا هر زمان که DOM آماده عبور و دستکاری است اجرا شود |
trigger() | یک رویداد را در هر عنصر منطبق راه اندازی میکند |
triggerHandler() | همه کنترل کنندههای رویداد محدود را روی یک عنصر فعال میکند |
unbind() | این کار برعکس bind را انجام میدهد، رویدادهای محدود را از هر یک از عناصر مطابقت حذف میکند |
مطالعه مقاله مرجع رویدادها در jQuery به شما پیشنهاد میشود؛ مقاله متد bind() در jQuery در اینجا به پایان میرسد، نظرات خود را با ما به اشتراک بگذارید.
این مقاله چقدر براتون مفید بود؟