در این مقاله خواهد بوددرباره رویدادهای ماوس جاوا اسکریپت این رویدادها در جاوا اسکریپت بسیار مهم هستند و در هر مرحله استفاده می شوند. ابتدا، من شما را از طریق تمام رویدادهای استاندارد ماوس راهنمایی می‌کنم: ماوس کردن، ماوس‌افزار، کلیک، dblclick، mousemove و در نهایت جابجایی و خروج ماوس.
رویدادها را با ماوس پایین، موس و کلیک کنید
هنگامی که کاربر روی یک عنصر کلیک می کند، حداقل 3 رویداد ماوس به ترتیب فعال می شوند:
- با پایین آوردن ماوس، کاربر دکمه ماوس را روی عنصر فشار داد
- موس، کاربر دکمه ماوس را روی عنصر رها کرد
- رویدادهای کلیک، ماوس و موس بر روی عنصر شناسایی شدند
به طور کلی، رویدادهای ماوس و ماوس از رویدادهای کلیک مفیدتر هستند. گاهی اوقات کاربر روی ماوس کلیک می کند، اما رویداد کلیک فعال نمی شود.
فرض کنید کاربر روی یک دکمه روی یک لینک کلیک می کند، سپس مکان نما را به سمتی حرکت می دهد و دکمه را رها می کند. پیوند فقط رویداد حذف ماوس را مدیریت می کرد. زمانی که کاربر دکمه ماوس را فشار می‌دهد و سپس روی پیوند می‌چرخد و دکمه را رها می‌کند، می‌توانید وضعیت مخالف را تکرار کنید. فقط رویداد mouseup فعال می شود. در موارد دیگر، کلیک فعال می شود.
به هر حال، این مشکل فقط در صورتی رخ می دهد که شما بخواهید.شما باید برای رویدادهای onmousedown/up ثبت نام کنید، اما در اکثر موارد رویداد کلیک کافی است.
به یاد داشته باشید که در صورت استفاده از هشدار "s، مرورگر ممکن است گیج شود و ترتیب رویدادهای در حال اجرا و تعداد تماس های آنها را از دست بدهد.
رویداد Dblclick (دوبار کلیک)
رویداد dblclick بسیار کمتر از هر رویداد ماوس دیگری رایج است. اگر از آن استفاده می‌کنید، مطمئن شوید که از کنترل‌کننده‌های رویداد onclick و ondblclick برای یکسان استفاده نکنید. عنصر HTML... تشخیص اینکه کاربر در این مورد چه کاری انجام داده است تقریبا غیرممکن است.
هنگامی که کاربر روی یک عنصر دوبار کلیک می کند، ابتدا رویداد کلیک فعال می شود و تنها پس از آن dblclick می شود. استفاده از پیام های هشدار نیز در اینجا بسیار خطرناک است.
رویداد Mousemove
رویداد mousemove به خوبی کار می کند، اما باید به خاطر داشته باشید که پردازش این نوع رویداد ممکن است کمی طول بکشد. رویداد mousemove زمانی فعال می شود که کاربر نشانگر ماوس را یک پیکسل حرکت دهد. به نظر می رسد که هیچ چیز خاصی اتفاق نمی افتد ، اما در داخل توابع پیچیده ای وجود دارد که اجرای آنها مدت زمان طولانی را می طلبد. این می تواند منجر شود کار ناپایدارسایت. بنابراین، بهتر است از کنترل کننده رویداد onmousemove فقط در جایی که واقعاً به آن نیاز دارید استفاده کنید و حتماً در آینده آن را حذف کنید.
Element.onmousemove = doSomething;
// بعد
element.onmousemove = null;
رویدادهای موشواره و حذف ماوس
بیایید یک مثال سریع بزنیم. سعی کنید ماوس خود را روی عناصر قرار دهید پس زمینه متفاوت... عنصر 1 باید کمی چشمک بزند زمانی که ماوس را روی آن قرار می‌دهید - با این کار رویداد ماوس را فعال می‌کند.
عنصر شماره 1
دهانه عنصر شماره 2
با این حال، همانطور که می بینید، این رویداد همچنین زمانی که نشانگر ماوس را روی عنصر شماره 2 قرار می دهید و حتی در بازه زمانی قرار می دهید، فعال می شود.
دلیل این رفتار این است که رویداد تنظیم شده روی عنصر اول برای گره های فرزند آن نیز اعمال می شود. همه چیز بسیار واضح است، اما مشکل زمانی ایجاد می‌شود که وقتی مکان‌نمای ماوس حرکت می‌کند، مثلاً از عنصر دهانهبه عنصر شماره 2.
"موش از کجا آمد؟" یا relatedTarget، fromElement و toElement خواص
مایکروسافت دو دستگاه برای ذخیره این اطلاعات ایجاد کرد:
- fromElement - اشاره به عنصری دارد که ماوس از آن آمده است.
- toElement - عنصری که ماوس به آن رسید.
کد متقابل مرورگر
بنابراین اگر می خواهید بدانید که ماوس با استفاده از رویداد mouseover از کجا آمده است، از اسکریپت زیر استفاده کنید:
تابع doSomething (e) (
var relTarg = e.relatedTarget || e.fromElement;
}
در صورت استفاده از رویداد mouseout (عنصری که مکان نما به سمت آن حرکت می کند):
تابع doSomething (e) (
if (! e) var e = window.event;
var relTarg = e.relatedTarget || e.toElement;
}
موشواره و برگ موش
مایکروسافت راه دیگری برای حل این مشکل ارائه می دهد. آنها 2 رویداد جدید mouseenter و mouseeleave ایجاد کردند. این رویدادها رفتاری مشابه با ماوس و موس را دارند. تنها تفاوت این است که رویدادها "پرش" ندارند عناصر کودک... این به خوبی مشکل ما را که در مثال ارائه شده حل می کند.
خوب، این تمام چیزی است که می خواستم به شما بگویم رویدادهای جاوا اسکریپتموش. خوشحال میشم نظراتتون رو جواب بدم
همانطور که به کاوش خود در مورد jQuery ادامه می دهیم، اجازه دهید به بررسی موضوع مدیریت رویداد در jQuery بپردازیم.
رویدادهای سند
رویدادها زمانی رخ می دهند که کاربر با صفحه وب در تعامل باشد. رویدادها نوعی اعلان از سیستم هستند که کاربر اقدامی را انجام داده یا شرایطی در خود سیستم رخ داده است. رویدادها با کلیک کردن روی یک عنصر، حرکت ماوس، فشار دادن کلید صفحه کلید، تغییر اندازه پنجره، پایان بارگیری یک صفحه وب و موارد دیگر فعال می شوند. با دانستن اینکه این یا آن عنصر از صفحه وب چه رویدادهایی می تواند ایجاد کند، می توانید تابعی برای مدیریت این رویداد بنویسید. به عنوان مثال، هنگام ارسال داده های فرم، رویداد onsubmit مطرح می شود. هنگامی که این رویداد رخ می دهد، می توانید داده های وارد شده توسط کاربر را بررسی کنید و در صورت عدم مطابقت با مورد انتظار، ارسال داده را متوقف کنید.
در همان ابتدای کتاب، امکان اجرای اسکریپت ها بلافاصله پس از شکل گیری ساختار سند، بدون انتظار برای بارگذاری عناصر دیگر را در نظر گرفته ایم. همانطور که می دانید، می توانید این رویداد را با استفاده از روش آماده () مدیریت کنید.
هشدار ("سند برای اجرای اسکریپت ها موجود است")؛
});
اگر نیاز به انجام هر عملی دارید فقط بعد از آن بارگذاری کاملخود سند HTML و همچنین تمام عناصر دیگر (به عنوان مثال، تصاویر)، سپس می توانید از روش بارگذاری () استفاده کنید. سینتکس روش به شرح زیر است.
بار (عملکرد پاسخ به تماس)
عملکرد<Название функции>([شیء رویداد]) (
// ...
}
اجازه دهید پیام تایید و نوع رویداد را پس از بارگیری کامل صفحه وب نمایش دهیم.
$ (پنجره) .load (عملکرد (e) (
هشدار ("سند به طور کامل بارگیری شده است")؛
هشدار ("نوع رویداد" + е.type)؛
});
در نتیجه اجرا دو پیام دریافت خواهیم کرد.
سند به طور کامل بارگذاری شده است
بارگیری نوع رویداد
روش unload () برای انجام هر اقدامی بلافاصله قبل از تخلیه سند استفاده می شود. این روش دارای نحو زیر است.
تخلیه (عملکرد پاسخ به تماس)
پارامتر Callback Function یک مرجع تابع را در قالب زیر مشخص می کند.
عملکرد<Название функции>([<Объект event>]) {
// ...
}
بیایید قبل از بارگیری سند، پیام را نمایش دهیم.
$ (پنجره) .unload (تابع ()
(هشدار ("بیا داخلبیشتر!");
});
در این بخش، دو روش مفید دیگر را بررسی خواهیم کرد.
تغییر اندازه (Callback) - زمانی که اندازه پنجره تغییر می کند اجرا می شود.
اسکرول (Callback) - زمانی که محتوای یک صفحه، سند، پنجره یا عنصر قاب پیمایش می شود اجرا می شود.
پارامتر Callback Function یک مرجع تابع را در قالب زیر مشخص می کند.
نام تابع تابع ([شیء رویداد]) (
// ...
}
شما می توانید پیمایش محتویات پنجره را کنترل کنید و پیامی مانند این را نمایش دهید.
$ (پنجره) .scroll (تابع () (
هشدار ("پیمایش محتویات پنجره")؛
});
به عنوان مثالی از استفاده از روش تغییر اندازه ()، عرض و ارتفاع پنجره را پس از تغییر اندازه آن بدست آورید (فهرست 6.1).
لیست 6.1. نمایش عرض و ارتفاع پنجره هنگام تغییر اندازه
نمایش عرض و ارتفاع پنجره در هنگام تغییر</i><br><i>اندازه</i><i>
هنگامی که اندازه پنجره در عنصر با شناسه divl تغییر می کند، عرض و ارتفاع پنجره نمایش داده می شود.
روش خطا (عملکرد Callback) زمانی فراخوانی می شود که خطایی در صفحه یا در وجود داشته باشد کد جاوا اسکریپت... پارامتر Callback Function یک مرجع تابع را در قالب زیر مشخص می کند.
نام تابع تابع ([پیام [، URL [، شماره خط]]]) (
// ...
}
اگر خطا در شی پنجره رخ داده باشد، سه پارامتر در تابع callback در دسترس خواهد بود:
پیام - متنی که خطا را توصیف می کند.
URL آدرس کامل سند خطا است.
شماره خط - شماره خط با خطا.
برای پنهان کردن خطاهای جاوا اسکریپتاز کاربران، لازم است در داخل تابع callback مقدار true را برگردانید.
$ (پنجره) .error (تابع () (
بازگشت درست؛
});
با استفاده از روش error () می توانید خطای بارگذاری تصویر را مدیریت کنید.
$ ("img"). خطا (تابع () (
$ (this) .attr ("src"، "noimage.gif");
});
توجه داشته باشید
برای کار درستبرای این مثال، باید اسکریپت را روی سرور میزبانی کنید. در غیر این صورت، رویداد ترتیب اثر داده نخواهد شد.
رویدادهای ماوس در جی کوئری
روش های زیر برای مدیریت رویدادهای ماوس در جی کوئری ارائه شده است.
کلیک کنید ([Callback]) - زمانی که یک عنصر یا صفحه وب کلیک می شود اجرا می شود. اگر پارامتر مشخص نشده باشد، یک کلیک روی عنصر شبیه سازی می شود. قبل از رویداد onclick دو رویداد وجود دارد: onmousedown و onmouseup. بیایید پس از کلیک بر روی هر دکمه، پیامی را نمایش دهیم.
$ ("button") .click (تابع () (
});
Toggle () - به شما امکان می دهد هنگام کلیک بر روی یک عنصر یا صفحه وب چندین عملکرد را جایگزین کنید. توابع به نوبه خود فراخوانی می شوند. اولین کلیک تابع اول، دوم، دوم و سومین تابع را فراخوانی می کند. اگر تابع سوم تعریف نشده باشد، تابع اول دوباره فراخوانی می شود و به همین ترتیب. متد toggle () دارد فرمت زیر.
تغییر وضعیت (<Функция обратного вызова 1>,
<Функция обратного вызова 2>[,
<Функция обратного вызова N>])
بیایید رنگ متن پاراگراف را بعد از هر کلیک ماوس تغییر دهیم.
$ ("p"). تغییر دهید
(عملکرد () (
$ (this) .css ("رنگ"، "قرمز");
عملکرد () (
$ (this) .css ("رنگ"، "آبی");
عملکرد () (
$ (this) .css ("رنگ"، "سبز");
}
) .کلیک ()؛
سعی کنید چند بار روی پاراگراف کلیک کنید. رنگ متن به ترتیب از قرمز به آبی، از آبی به سبز، از سبز به قرمز تغییر می کند. به خط آخر مثال توجه کنید. پس از تخصیص یک کنترل کننده رویداد، رویداد onclick با استفاده از روش کلیک () بدون پارامتر فراخوانی می شود. به همین دلیل رنگ پاراگراف از همان ابتدا قرمز خواهد بود.
Dblclick ([عملکرد پاسخ به تماس]) - زمانی که اجرا می شود دوبار کلیک کنیددر یک آیتم یا صفحه وب اگر پارامتر مشخص نشده باشد، یک دوبار کلیک روی عنصر شبیه سازی می شود. قبل از رویداد ondblclick سه رویداد وجود دارد: onmousedown، onmouseup و onclick. بیایید وقتی روی هر پاراگراف دوبار کلیک می کنید، پیامی نمایش داده شود.
$ ("p"). dblclick (تابع () (
هشدار ("شما دوبار کلیک کردید")؛
});
mousedown (Callback) - زمانی که دکمه ماوس روی یک عنصر یا صفحه فشار داده می شود اجرا می شود. رویداد onmousedown قبل از رویدادهای onmouseup و onclick فعال می شود.
mouseup (Callback) - زمانی اجرا می شود که دکمه قبلاً فشار داده شده ماوس آزاد شود. رویداد onmouseup بین رویدادهای onmousedown و onclick فعال می شود. اجازه دهید هنگام کلیک کردن و رها کردن دکمه ماوس روی یک پاراگراف، پیام‌ها را نمایش دهیم.
$ ("p"). ماوس (تابع () (
$ ("# divl"). append ("رویداد Onmousedown" + "
");
)) موس (عملکرد () (
$ ("# divl"). append ("رویداد Onmouseup" + "
");
});
<р>مرا کلیک کن
Mousemove - هر زمان که ماوس جابجا شود اجرا می شود. بیایید هنگام حرکت مکان نما روی یک پاراگراف، پیامی نمایش دهیم.
$ ("p") .mousemove (تابع () (
$ ("# divl"). append ("رویداد Onmousemove" + "
");
});
ماوس (Callback) - زمانی که ماوس روی عنصر قرار می گیرد اجرا می شود.
mouseout (Callback) - زمانی اجرا می شود که نشانگر ماوس عنصر را ترک کند. هنگامی که ماوس را روی لینک قرار می دهید، رنگ پیوند را قرمز می کنیم و پیام را نشان می دهیم و زمانی که مکان نما از لینک خارج می شود، رنگ آن را به سیاه تغییر می دهیم و پیام را نمایش می دهیم.
$ ("a") .mouseover (تابع () (
$ (this) .css ("رنگ"، "قرمز");
$ ("# divl") ضمیمه ("رویدادروی موشواره "+"
");
)) موس (عملکرد () (
$ (this) .css ("رنگ"، "مشکی");
$ ("# divl") ضمیمه ("رویدادonmouseout "+"
");
}>;
Hover () - به شما امکان می دهد شناور کردن و ترک یک عنصر را با یک روش واحد مدیریت کنید. دارای فرمت زیر
شناور (Callback برای رویداد onmouseover، Callback برای رویداد onmouseout)
بیایید مثال قبلی خود را دوباره انجام دهیم و از متد hover () استفاده کنیم.
$ ("a"). شناور (تابع () (
$ (this) .css ("رنگ"، "قرمز");
$ ("# divl"). append ("رویداد Onmouseover" + "
"); },
عملکرد () (
$ (this) .css ("رنگ"، "مشکی");
$ ("# divl"). append ("رویداد Onmouseout" + "
");
});
روش hover () مزیت دیگری نیز دارد. اگر بلوک دیگری در داخل بلوک وجود داشته باشد، هنگام ورود، توابع جداگانه فراخوانی می شوند واحد داخلیو همچنین هنگام خروج از آن. هنگام استفاده از روش شناور () این حرکات نادیده گرفته می شوند (فهرست 6.2).
لیست 6.2. مشخصات استفاده از روش شناور
()
مشخصات استفاده از روش شناور ()
انتخاب شدکنترل کننده ها:
خط 1
خط 2
عملکردشناور ():
خط 1
خط 2
برای اولین بلوک تودرتو، کنترل‌کننده‌های رویداد جداگانه را تعریف کرده‌ایم. اگر نشانگر ماوس را در کل بلوک در وسط حرکت دهیم، دنباله رویدادهای زیر را دریافت می کنیم.
رویداد Onmouseover
رویداد Onmouseout
رویداد Onmouseover
رویداد Onmouseout
رویداد Onmouseover
رویداد Onmouseout
برای دومین بلوک تودرتو، کنترل‌کننده‌های رویداد با استفاده از روش شناور () اختصاص داده می‌شوند. با همین عمل فقط دو رویداد بدست می آوریم.
رویداد Onmouseover
رویداد Onmouseout
در تمام روش های ارائه شده در این بخش، ما هنوز پارامترهایی را که می توان به آنها منتقل کرد، مشخص نکرده ایم.
// ...
}
عنصری که رویداد را افزایش داده است در داخل تابع از طریق این نشانگر قابل دسترسی است. توجه داشته باشید که این اشاره گر به عنصر اشاره دارد مدل شیسند و نه در یک عنصر مجموعه jQuery. اگر متغیری در پارامتر event Object مشخص شده باشد، از طریق آن می توانید به ویژگی های جسم رویداد دسترسی پیدا کنید. بیایید یک کنترل کننده کلیک ماوس برای دو عنصر به طور همزمان بنویسیم. پس از فشار دادن، نام تگ را در عنصر با شناسه divl نمایش دهید.
$ ("ص، div "). کلیک کنید (عملکرد (e) {
$ ("# divl")
.append ("عنصر"+ e.srcElement.tagName +"
");
});
رویدادهای صفحه کلید در جی کوئری
JQuery روش های زیر را برای مدیریت رویدادهای صفحه کلید ارائه می دهد.
keydown - با فشار دادن یک کلید صفحه کلید اجرا می شود.
keyprcss (عملکرد برگشت به تماس) - با فشار دادن یک کلید صفحه کلید اجرا می شود. مانند keydown ()، اما مقدار کد کاراکتر را برمی گرداند رمزگذاری یونیکد... رویداد به طور مداوم ایجاد می شود تا زمانی که کاربر کلید را آزاد کند.
keyup (عملکرد برگشت به تماس) - زمانی اجرا می شود که یک کلید صفحه کلید قبلاً فشار داده شده رها شود.
به عنوان یک پارامتر برای تابع Callback، شما یک مرجع به یک تابع در قالب زیر را مشخص می کنید.
نام تابع تابع ([شیء رویداد]) (
// ...
}
اگر متغیری در پارامتر event Object مشخص شده باشد، از طریق آن می توانید به ویژگی های جسم رویداد دسترسی پیدا کنید. به عنوان مثال، برای دریافت کد کلید فشرده شده، می توانید از ویژگی key Code استفاده کنید. به عنوان مثال، اجازه دهید کد کلید فشرده شده را دریافت کرده و دنباله رویدادها را نشان دهیم (فهرست 6.3).
لیست 6.3. رویدادهای صفحه کلید
مناسبت ها</i><i>صفحه کلید</i><i>
کادر متن را هایلایت کرده و کلیدی را روی صفحه کلید خود فشار دهید. برای مثال، بیایید کلید A را با طرح صفحه کلید روسی فشار دهیم. در نتیجه پیام زیر را دریافت خواهیم کرد.
کلید 70
keyprcss 1072
کلید 7 0
رویدادها را در jQuery تشکیل دهید
روش‌های زیر برای مدیریت رویدادهای فرم طراحی شده‌اند.
فوکوس ([Callback]) - زمانی اجرا می شود که عنصر فرم فوکوس را دریافت کند. اگر پارامتر مشخص نشده باشد، عنصر فوکوس ورودی را دریافت می کند.
blur ([Callback]) - زمانی اجرا می شود که عنصر فرم فوکوس خود را از دست بدهد. اگر پارامتر مشخص نشده باشد، عنصر فوکوس ورودی را از دست می دهد.
تغییر (Callback) - زمانی که داده های کادر متن تغییر می کند و تمرکز به عنصر فرم دیگری منتقل می شود یا زمانی که داده های فرم ارسال می شود اجرا می شود.
ارسال ([عملکرد برگشت به تماس]) - زمانی که داده‌های فرم ارسال می‌شوند اجرا می‌شود. اگر پارامتر مشخص نشده باشد، فرم ارسال می شود.
select ([Callback Function]) - زمانی اجرا می شود که محتوای عنصر انتخاب شده باشد. اگر پارامتر مشخص نشده باشد، محتوای عنصر به طور کامل انتخاب می شود.
به عنوان یک پارامتر برای تابع Callback، شما یک مرجع به یک تابع در قالب زیر را مشخص می کنید.
نام تابع تابع ([شیء رویداد]) (
// ...
}
عنصری که رویداد را افزایش داده است در داخل تابع از طریق این نشانگر قابل دسترسی است. توجه داشته باشید که این اشاره گر به یک عنصر در مدل شیء سند اشاره دارد، نه عنصری در مجموعه jQuery. اگر متغیری در پارامتر event Object مشخص شده باشد، از طریق آن می توانید به ویژگی های جسم رویداد دسترسی پیدا کنید.
بیایید نحوه مدیریت رویدادهای فرم های مختلف را نشان دهیم (فهرست 6.4).
مناسبت ها</i><i>شکل</i><i>
1
2
3
4
!}
id = "btn2">
!}
بنابراین، ما یک فرم با سه عنصر ایجاد کرده ایم. هنگامی که یک مورد را از لیست انتخاب می کنید، پیامی با مقدار مورد انتخاب شده نمایش داده می شود. اگر فیلد متنی را انتخاب کنید، رنگ پس‌زمینه تغییر می‌کند و اگر فوکوس را از قسمت حذف کنید، رنگ پس‌زمینه دوباره سفید می‌شود. با کلیک بر روی دکمه ارسال یک کادر محاوره ای نمایش داده می شود که می توانید از آن برای قطع ارسال داده های فرم استفاده کنید. چهار دکمه در زیر فرم وجود دارد. دکمه اول به شما اجازه می دهد تا محتوا را برجسته کنید جعبه متن... پس از انتخاب، پیامی در مورد انتخاب قطعه نمایش داده می شود، زیرا ما کنترل کننده مناسب را تعریف کرده ایم. همین پیام را می توان با استفاده از ماوس برای انتخاب یک قطعه در فیلد دریافت کرد. دکمه دوم به شما امکان می دهد فوکوس ورودی را روی قسمت متن تنظیم کنید و سوم - آن را حذف کنید. در نهایت، دکمه چهارم برای ارسال اطلاعات فرم است. با کلیک بر روی این دکمه کادر محاوره ای برای تایید ارسال داده ها نمایش داده می شود.
کنترل‌کننده‌های رویداد عمومی JQuery
در بخش‌های قبلی، به کنترل‌کننده‌های رویداد خاص نگاه کردیم. کتابخانه jQuery همچنین به شما اجازه می دهد تا کنترل کننده هایی را برای رویدادهای مختلف (از جمله رویدادهای خودتان) در یک روش اختصاص دهید. روش‌های زیر برای اختصاص، فراخوانی و حذف کنترل‌کننده‌ها استفاده می‌شود.
Bind (نوع رویداد [، داده]، عملکرد برگشت به تماس) - به شما امکان می دهد یک کنترل کننده به تمام عناصر مجموعه اختصاص دهید. مقادیر زیر را می توان در پارامتر Event Type مشخص کرد:
رویدادهای سند: بارگیری، بارگیری، تغییر اندازه، پیمایش، خطا.
رویدادهای ماوس: کلیک، dblclick، mousedown، mouseup، mousemove، mouseover، mouseout، mouseenter، mouseeleave.
رویدادهای صفحه کلید: keydown، keyprcss، keyup.
رویدادهای شکل: تمرکز، محو کردن، تغییر، انتخاب، ارسال.
ما قبلاً تقریباً همه این رویدادها را در بخش های قبلی بررسی کرده ایم. به عنوان مثال، شما می توانید یک کنترل کننده رویداد کلیک را به همه دکمه های مانند این اختصاص دهید.
$ (": دکمه") .bind ("کلیک"، تابع ()
(هشدار ("شمافشرده شده استبر رویدکمه");
});
دو رویداد موش در نظر گرفته نشده باقی مانده است. رویداد mouseenter زمانی فعال می شود که ماوس روی عنصر قرار می گیرد و رویداد خروج ماوس با خروج ماوس از عنصر فعال می شود. استفاده از این رویدادها با مدیریت رویدادهای ماوس و حذف ماوس متفاوت است. اگر بلوک دیگری در داخل بلوک وجود داشته باشد، هنگام ورود به بلوک داخلی، رویداد Mouseover و هنگام خروج از بلوک، رویداد mouseout فعال می‌شود. هنگام استفاده از رویدادهای mouseenter و mouseeleave، این حرکات نادیده گرفته می شوند (فهرست 6.5).
لیست 6.5. رویدادهای Mouseenter و Mouseeleave
مناسبت ها</i><i>موشواره و</i><i>برگ موش
content = "text / html; charset = utf-8">
مناسبت هاماوس وماوس کردن:
خط 1
خط 2
مناسبت هاموشواره وبرگ موش:
خط 1
خط 2
برای اولین بلوک تودرتو، ما کنترل کننده رویداد mouseover و mouseout را تعریف کرده ایم. اگر نشانگر ماوس را در کل بلوک در وسط حرکت دهیم، دنباله رویدادهای زیر را دریافت می کنیم.
رویداد Mouseover
رویداد Mouseout
رویداد Mouseover
رویداد Mouseout
رویداد Mouseover
رویداد Mouseout
برای دومین بلوک تودرتو، کنترل کننده رویداد mouseenter و mouseeleave اختصاص داده شده است. با همین عمل فقط دو رویداد بدست می آوریم.
رویداد Mouseenter
رویداد برگ موش
پارامتر Event Type می تواند شامل ترکیبی از رویدادها باشد که با یک فاصله از هم جدا شده اند. بیایید کلاس پیوند را در شناور تغییر دهیم و با خروج مکان نما کلاس را حذف کنیم.
$ ("a") .bind (" mouseenter mouseleave ", function () (
$ (this) .toggleClass ("clsl");
});
علاوه بر این، می توانید رویدادهای خود را با استفاده از روش bind () اختصاص دهید. رویدادهای شما با استفاده از روش‌های trigger () و triggerHandler () فراخوانی می‌شوند. بیایید رویداد خودمان را ایجاد کنیم و سپس آن را فراخوانی کنیم.
$ ("# divl"). bind ("myEvent"، تابع () (
هشدار ("مدیریت رویداد خود")؛
});
$ ("# divl"). ماشه ("myEvent11)؛ // رویداد را افزایش دهید
به عنوان یک پارامتر برای تابع Callback، شما یک مرجع به یک تابع در قالب زیر را مشخص می کنید.
نام تابع تابع ([رویداد شی [، آرگومان ها]]) (
// ...
}
$ ("#divl") .bind ("myEvent11، تابع (e، msg) (
});
$ ("# divl"). trigger ("myEvent"، ["پیام ما"]);
از طريق پارامتر اختیاریداده ها را می توان مقادیر را به یک تابع کنترل کننده ارسال کرد. برای این کار، پارامترها و مقادیر ارسالی باید به صورت زیر مشخص شوند.
{
Parameter1: "Value1"،
Parameter2: "Value2"،
پارامترها: "مقدار"
}
می توانید مقدار پارامتر پاس شده را در داخل تابع به این صورت دریافت کنید.
3value = Object event.data.Parameter
بیایید به یک مثال نگاه کنیم.
تابع f_click (e) (
var str = "msgl = 11 + e.data.msgl +" \ n ";
str + = "msg2 = 11 + e.data.msg2; هشدار (str);
بازگشت نادرست؛
}
$ ("a") .bind (
"کلیک کنید"، // رویداد
(msgl: "Message 1", msg2: "Message 2")، // داده های ما
f_click // پیوند به تابع
) ;msgl = پیام 1
msg2 = پیام 2کنترل کننده های متعددی را می توان به یک رویداد اختصاص داد. در این صورت آنها به ترتیبی که تعریف شده اند فراخوانی می شوند.
هشدار ("اولکنترل کننده");
});
$ ("# btnl"). bind ("کلیک کنید"، تابع () (
هشدار ("دومکنترل کننده");
});وقتی روی آیتم با شناسه btnl کلیک می کنید، دو پیام به ترتیب نمایش داده می شود.
اولین کنترلر
کنترل کننده دومیک (نوع رویداد [، داده]، عملکرد برگشت به تماس) - به شما امکان می دهد یک کنترل کننده به همه موارد موجود در مجموعه اختصاص دهید. این روش با bind () یکسان است، اما رویداد فقط یک بار فعال می شود، پس از آن کنترل کننده به طور خودکار حذف می شود.
$ ("button"). one ("کلیک"، تابع ()
(هشدار ("شما روی دکمه کلیک کردید")؛
});پس از اولین کلیک بر روی دکمه، پیام مشخص شده نمایش داده می شود و پس از کلیک دوم دیگر کنترل کننده فراخوانی نمی شود.
ماشه (نوع رویداد [، آرایه داده]) - کنترل کننده را برای رویداد مشخص شده فراخوانی می کند.
$ (سند) .bind ("کلیک کنید"، تابع () (
// هشدار Handler ("رویداد Onclick");
});
$ (سند) .trigger ("کلیک"); // با کنترل کننده تماس بگیرید
اگر آرایه ای از داده ها مشخص شده باشد، آنگاه به تابع callback در handler ارسال می شود. هر پارامتر با یک عنصر از آرایه مطابقت دارد.
$ ("# divl"). bind ("myEvent"، تابع (e, msgl, msg2) (
$ ("# div2"). ضمیمه ("رویدادmyEvent. "+msgl +" 11 +
msg2) .append ("br");
});
$ ("p"). کلیک کنید (تابع () (
$ ("# divl"). trigger ("myEvent"، ["Message1"، "Message2"]);
});<р>اینجا را فشار دهید
در نتیجه اجرای این کد پیامی دریافت خواهیم کرد.
myEvent. Message1 Message2
TtiggerHandleg (نوع رویداد [، آرایه داده]) - کنترل کننده را برای رویداد مشخص شده فراخوانی می کند. برخلاف روش ماشه ()، رویداد فقط برای اولین مورد در مجموعه فعال می شود. همچنین، هنگام استفاده از متد tiggerHandleg () هیچ اقدام پیش‌فرضی انجام نمی‌شود.
$ ("فرم"). bind ("ارسال"، تابع (e، msg) (
اگر (پیام) (
هشدار ("فرم ارسال نمی شود." + msg);
}
دیگر (
هشدار ("فرم ارسال خواهد شد")؛
});
$ (": دکمه"). bind ("کلیک کنید"، تابع () (
$ ("فرم"). triggerHandler ("ارسال"، ["داده های ما"]);
});
اگر نام تابع را در پارامتر دوم مشخص کنید، تنها کنترل کننده با آن نام حذف می شود.
تابع f__clickl () (
هشدار ("عملکرد f__clickl ()");
}
تابع f_click2 () (
هشدار ("عملکرد f__click2 ()");
}
$ ("# btnl"). bind ("click", f_clickl); $ ("#btnl")
.bind ("click", f_click2);
$ ("# btn2"). bind ("کلیک کنید"، تابع () (
$ ("# btnl"). unbind ("click", f_click2);
});
عملکرد
f_click1 ()
عملکرد
f_clJck2 ()
پس از کلیک بر روی دکمه Remove، رویداد کنترل کننده با نام f_click2 حذف خواهد شد. حال پس از کلیک بر روی دکمه اول فقط یک پیام دریافت می کنیم.
تابع F_clJck1 ()
اگر پارامترها مشخص نشده باشند، همه کنترل کننده ها حذف خواهند شد.
مناسبت ها. $ ("# btnl"). unbind ();
متدهای JQuery live () و die ()
تخصیص کنترل کننده رویداد با استفاده از روش bind () دارای یک اشکال مهم است. اگر یک کنترل کننده اختصاص دهیم و سپس عناصر جدیدی اضافه کنیم، هیچ کنترل کننده رویدادی به آن عناصر اختصاص داده نخواهد شد.
$ (": دکمه"). bind ("کلیک کنید"، تابع () (
var html = ` `;
$ (this) .after ("
"+ html)؛
});
در این مثال، ما یک کنترل کننده رویداد کلیک برای همه دکمه ها اختصاص داده ایم. پس از کلیک بر روی دکمه، یک دکمه جدید اضافه می شود. اگر سعی کنید روی آن کلیک کنید، هیچ تغییری رخ نخواهد داد.
روش زنده () برای تخصیص پویا کنترل کننده رویداد استفاده می شود. بیایید مثال قبلی خود را دوباره انجام دهیم و به جای bind () از متد live () استفاده کنیم.
$ (": دکمه"). زنده ("کلیک کنید"، تابع () (
var html = ` `;
$ (this) .after ("
"+ html)؛
});
در این حالت با کلیک بر روی دکمه new دکمه دیگری ظاهر می شود. با کلیک بر روی این دکمه دکمه دیگری و غیره ایجاد می شود.
توجه داشته باشید
متد live () از jQuery 1.3 در دسترس بوده است. در نسخه های قبلی، می توانید از ماژول Live Query استفاده کنید.
متد زنده () دارای فرمت زیر است، زنده (نوع رویداد، عملکرد برگشت به تماس)
مقادیر زیر را می توان در پارامتر Event Type مشخص کرد:
رویدادهای ماوس: کلیک، dblclick، mousedown، mouseup، mousemove، mouseover، mouseout.
رویدادهای صفحه کلید: keydown، keyprcss، keyup.
علاوه بر این، می توانید رویدادهای خود را با استفاده از روش زنده () اختصاص دهید. رویدادهای شما با استفاده از روش‌های trigger () و trigger-handler () فراخوانی می‌شوند. بیایید رویداد خودمان را ایجاد کنیم و سپس آن را فراخوانی کنیم.
$ ("# divl"). live ("myEvent"، تابع () (
هشدار ("مدیریت رویداد خود")؛
});
$ (": دکمه"). کلیک کنید (تابع () (
$ ("# divl"). trigger ("myEvent"); // رویداد را بالا ببرید
});
پارامتر Callback Function اشاره ای به یک تابع در قالب زیر است.
نام تابع تابع ([رویداد شی [، آرگومان ها]]) (
// ...
}
عنصری که رویداد را افزایش داده است در داخل تابع از طریق این نشانگر قابل دسترسی است. توجه داشته باشید که این اشاره گر به یک عنصر در مدل شیء سند اشاره دارد، نه عنصری در مجموعه jQuery. اگر متغیری در پارامتر event Object مشخص شده باشد، از طریق آن می توانید به ویژگی های جسم رویداد دسترسی پیدا کنید. در پارامتر Arguments می توانید چندین متغیر را مشخص کنید که با کاما از هم جدا شده اند. می توانید با استفاده از پارامتر دوم متدهای trigger () و triggerHandler () مقادیر را به این متغیرها منتقل کنید.
$ ("# divl"). bind ("myEvent"، تابع (e, msg) (
هشدار ("Handling your own event." +msg);
});
$ (": دکمه"). کلیک کنید (تابع () (
$ ("# divl"). ماشه ("myEvent"، ["Ourپیام"]);
});
می توانید با استفاده از روش die () یک رویداد کنترل کننده را حذف کنید. قالب روش: قالب (نوع رویداد [، نام تابع])
توجه داشته باشید
متد die () از jQuery 1.3 در دسترس بوده است.
بیایید به یک مثال نگاه کنیم.
$ ("# btnl"). live ("کلیک"، تابع ()
(هشدار ("شما روی دکمه کلیک کردید")؛
});
$ ("# btnl"). die ("کلیک کنید"); // کنترل کننده را بردارید
});
اگر نام تابع را در پارامتر دوم مشخص کنید، تنها کنترل کننده با آن نام حذف می شود.
تابع f_clickl () (
هشدار ("عملکردf_clickl ()");
}
تابع f_click2 () (
هشدار ("عملکردf_click2 ()");
$ ("# btnl"). live ("click", f_clickl);
$ ("# btnl"). live ("click", f_click2);
$ ("# btn2"). روی (عملکرد () (
$ ("# btnl"). die ("click", f_click2);
});
!}
!}
در این مثال، ما دو کنترل کننده رویداد کلیک را برای دکمه اول اختصاص داده ایم. اگر روی دکمه Click me کلیک کنید دو پیام نمایش داده می شود.
تابع F_clJck1 ()
تابع F_clJck2 ()
با کلیک بر روی دکمه Remove، رویداد کنترل کننده f_click2 حذف می شود. حال پس از کلیک بر روی دکمه اول فقط یک پیام دریافت می کنیم.
تابع F_click1 ().
حباب کردن رویدادها در جی کوئری
حباب رویداد چیست؟ بیایید به مثال زیر نگاه کنیم (فهرست 6.6).
لیست 6.6. حوادث حباب
شناور</i><i>مناسبت ها</i><i>
کلیکموش اینجا
در این مثال، یک کنترل کننده رویداد onclick برای تمام عناصر صفحه نوشتیم. بیایید سعی کنیم روی یک کلمه در اینجا کلیک چپ کنیم. در نتیجه، به جای یک رویداد، یک توالی کامل از رویدادها را دریافت می کنیم.
عنصر SPAN
عنصر P
عنصر BODY
عنصر HTML
به عبارت دیگر رویداد onclick به صورت متوالی به عنصر والد بعدی منتقل می شود. برای تگ span، عنصر والد یک پاراگراف است. برای یک پاراگراف، عنصر والد خود بدنه سند است و برای بدنه سند، عنصر والد تگ html است. به این گذر وقایع، حباب وقایع می گویند.
گاهی اوقات حباب رویدادها باید قطع شود. برای انجام این کار، مقدار false را در داخل تابع callback برگردانید. بیایید این را با یک مثال نشان دهیم (فهرست 6.7).
لیست 6.7. حباب رویدادها را قطع کنید
حباب رویدادها را قطع کنید
کلیکموش اینجا
حالا بیایید سعی کنیم روی کلمه اینجا کلیک چپ کنیم. در نتیجه، به جای چهار رویداد، فقط یک اتفاق می‌افتیم.
عنصر SPAN
علاوه بر برگرداندن false، می توانید از متد stopPropagation () شی رویداد برای توقف حباب زدن رویدادها استفاده کنید (فهرست 6.8).
لیست 6.8. قطع حباب با روش stopPropagation ().
توقف انتشار ()
قطع حباب با روش</i><br><i>توقف انتشار ()
کلیکموش اینجا
اقدامات پیش فرض JQuery و لغو
برای بسیاری از رویدادها، اقدامات پیش فرض اختصاص داده می شود، به عنوان مثال. اقداماتی که مرورگر وب در پاسخ به رویدادهای سند انجام می دهد. به عنوان مثال، هنگامی که روی یک لینک کلیک می کنید، عمل پیش فرض این است که به URL مشخص شده بروید، با کلیک بر روی دکمه ارسال، داده های فرم ارسال می شود و غیره.
گاهی اوقات اقدامات پیش فرض باید لغو شوند. به عنوان مثال، هنگام ارسال داده‌های فرم، می‌توانید آن‌طور که انتظار می‌رود اعتبارسنجی کنید و اگر شرایط مشخص‌شده را برآورده نکرد، ارسال را لغو کنید. برای انجام این کار، مقدار false را در داخل تابع handler برگردانید.
فهرست 6.9 نمونه ای از تأیید صحیح وارد کردن آدرس ایمیل در قسمت E-mail و قطع لینک در صورت بروز خطا را نشان می دهد.
لیست 6.9. اقدامات پیش فرض را قطع کنید
اقدامات پیش فرض را قطع کنید
پست الکترونیک:
را کلیک کنیدبرایانتقالبرارتباط دادن
علاوه بر برگرداندن false، می توانید از متد () preventDef ault شی رویداد برای لغو اقدامات پیش فرض استفاده کنید (فهرست 6.10).
لیست 6.10. قطع کردن رویدادها با متد () preventDefault
جلوگیری از پیش فرض ()
قطع رویدادها با روش</i><br><i>جلوگیری از پیش فرض ()
پست الکترونیک:
را کلیک کنیدبرایانتقالبرارتباط دادن
SSH(انگلیسی Secure SHell - "Secure Shell") یک پروتکل شبکه در سطح جلسه است که امکان کنترل از راه دور سیستم عامل و تونل زدن اتصالات TCP (مثلاً برای انتقال فایل ها) را فراهم می کند. از نظر عملکرد مشابه پروتکل های Telnet و rlogin است، اما بر خلاف آنها، تمام ترافیک، از جمله رمزهای عبور ارسال شده را رمزگذاری می کند. SSH امکان انتخاب الگوریتم های رمزگذاری مختلف را فراهم می کند. کلاینت های SSH و سرورهای SSH برای اکثر سیستم عامل های شبکه در دسترس هستند.
SSH عملاً به هر پروتکل شبکه دیگری اجازه می دهد تا به طور ایمن در یک محیط ناامن منتقل شود. بنابراین، شما نه تنها می توانید از راه دور بر روی یک کامپیوتر از طریق پوسته فرمان کار کنید، بلکه یک جریان صوتی یا ویدئو را از طریق یک کانال رمزگذاری شده (به عنوان مثال، از یک وب کم) نیز انتقال دهید. SSH همچنین می‌تواند از فشرده‌سازی داده‌های ارسالی برای رمزگذاری بعدی استفاده کند، که برای مثال برای راه‌اندازی از راه دور مشتریان سیستم X Window راحت است.
اکثر ارائه دهندگان هاستینگ دسترسی SSH را به دایرکتوری خانگی خود در ازای هزینه ای در اختیار مشتریان قرار می دهند. این می تواند هم برای کار در خط فرمان و هم برای راه اندازی از راه دور برنامه ها (از جمله برنامه های گرافیکی) راحت باشد.
اولین نسخه از پروتکل، SSH-1، در سال 1995 توسط محقق Tatu Ulönen از دانشگاه فناوری هلسینکی فنلاند توسعه یافت. SSH-1 برای ارائه حریم خصوصی بیشتر از پروتکل های rlogin، telnet و rsh نوشته شده است. در سال 1996، نسخه ایمن تر از پروتکل، SSH-2، توسعه یافت که با SSH-1 ناسازگار بود. این پروتکل حتی محبوبیت بیشتری پیدا کرد و تا سال 2000 حدود دو میلیون کاربر داشت. در حال حاضر، اصطلاح "SSH" معمولاً دقیقاً به معنای SSH-2 است، زیرا نسخه اول پروتکل در حال حاضر به دلیل کاستی های قابل توجه عملاً استفاده نمی شود.
روز بخیر، مشترکین کنجکاو و مهمانان وبلاگ. امروز قصد داریم شما را از طریق یک بخش مفید در یک زبان برنامه نویسی مبتنی بر نمونه اولیه، یعنی رویداد جاوا اسکریپت موس را راهنمایی کنیم.
من از شما می خواهم که درک خوبی از رویدادهایی مانند کلیک، موس، پایین آوردن ماوس، موس و موارد دیگر داشته باشید، تفاوت بین آنها را درک کنید و یاد بگیرید که چگونه از آنها برای حل وظایف در دست استفاده کنید. البته بعد از هر مطلب کلیدی نظری می توانید پیاده سازی نرم افزاری مثال ها را بیابید. خوب، بیایید شروع کنیم!
تمام اطلاعات در مورد رویدادهای ماوس
چندین رویداد برای ماوس وجود دارد که به طور کامل تمام اقدامات ممکن مکان نما در صفحه را پوشش می دهد. در میان آنها مواردی وجود دارند که هنگام کلیک کردن بر روی یک شی، شناور روی آن یا حرکت نشانگر روی یک پنجره باز فعال می شوند. همه آنها را می توان به دو گروه تقسیم کرد: رویدادهای ساده و پیچیده (ترکیب).
بیایید ساده شروع کنیم
ابتدا با اتفاقات ساده آشنا می شویم. فقط پنج نفر از آنها وجود دارد. برای سهولت، شرح هر ابزار را در جدول پیوست شده در زیر آورده ام.
| نام | شرح |
| ماوس پایین | رویداد نامگذاری شده زمانی فراخوانی می شود که یکی از دکمه های ماوس فشار داده شود اما هنوز رها نشده باشد. |
| موس | و این یکی از قبل با رها کردن دکمه ای که قبلاً بسته شده است فعال می شود. |
| ماوس بر | هنگامی که مکان نما روی شی مورد پردازش قرار می گیرد، فراخوانی می شود. |
| ماوس کردن | عملکرد مکان نما را که از منطقه عنصر خارج می شود کنترل می کند. |
| حرکت ماوس | هر حرکت اشاره گر بر روی یک منطقه خاص باعث ایجاد رویداد فعلی می شود. |
خوب، اکنون، برای تجمیع مطالب، اجازه دهید به یک مثال نگاه کنیم. من یک برنامه کوچک ایجاد کردم که در آن احساسات ایموجی هنگام شناور کردن و حرکت مکان نما تغییر می کند.
نشانگر ماوس را روی تصویر حرکت دهید تا تغییر کند.
حالا او را کنار بگذارید و تغییرات را تماشا کنید
وقت گروه بندی است
حال به سراغ دیدگاه های پیچیده می رویم. هر یک از این رویدادها شامل چندین مورد ساده است. در این حالت، تمام اجزای یک رویداد پیچیده به طور همزمان شلیک نمی کنند، بلکه در یک ردیف قرار می گیرند. بنابراین، گاهی اوقات ممکن است چنین شرایطی را مشاهده کنید که وقتی به سرعت روی آیتم های منوی یک وب سایت کلیک می کنید، گاهی اوقات کلیک کردن کار نمی کند.
چرا اینطور است؟ پاسخ به اندازه کافی ساده است.
بنابراین، رویدادهای ترکیبی در زیر فهرست شده‌اند.پردازش رویداد با حداکثر سرعت انجام می شود. و در عین حال، فراموش نکنید که رویدادها به نوبه خود پردازش می شوند. این بدان معناست که اگر خیلی سریع روی عناصر مختلف کلیک کنید، زنجیره پردازش ممکن است به طور کامل اجرا نشود.
همانطور که قبلا متوجه شدید، رویدادهای پیچیده تا حدودی زندگی توسعه دهندگان را ساده می کند، از جمله مجموعه ای از رویدادهای ساده ضروری به طور همزمان. در نتیجه، امروزه هیچ کس نمی‌تواند کار معمول دکمه‌ها یا سایر عناصر را بدون همین موارد تصور کند کلیک.
برای آشنایی عملی با عملکرد رویدادهای ذکر شده در بالا، برنامه قبلی را اصلاح کردم. نتیجه کار من را تجزیه و تحلیل کنید.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
همانطور که می بینید، همه چیز بسیار ساده است. این عناصر به راحتی در کد فراخوانی می شوند و آنها را به اقدامات خاص متصل می کنند.
