طرق حدث jQuery

❮ سابق التالي ❯

تم تصميم jQuery خصيصًا للاستجابة للأحداث في صفحة HTML.

ما هي الأحداث؟

تسمى جميع إجراءات الزوار المختلفة التي يمكن لصفحة الويب الاستجابة لها بالأحداث.

يمثل الحدث اللحظة الدقيقة عندما يحدث شيء ما.

أمثلة:

تحريك الماوس فوق عنصر
اختيار زر الاختيار
النقر فوق عنصر

غالبًا ما يستخدم مصطلح "حرائق / أطلقت" مع الأحداث. مثال: "يتم تشغيل حدث الضغط على المفتاح ، لحظة الضغط على مفتاح".

فيما يلي بعض أحداث DOM الشائعة:

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

بناء جملة jQuery لطرق الأحداث

في jQuery ، تحتوي معظم أحداث DOM على طريقة jQuery مكافئة.

لتعيين حدث نقرة لجميع الفقرات في الصفحة ، يمكنك القيام بذلك:

$("p").click();

الخطوة التالية هي تحديد ما يجب أن يحدث عند وقوع الحدث. يجب عليك تمرير وظيفة إلى الحدث:

$("p").click(function(){
// action goes here!!
});

طرق أحداث jQuery شائعة الاستخدام

$ (مستند). جاهز ()

تسمح لنا هذه $(document).ready()الطريقة بتنفيذ وظيفة عندما يتم تحميل المستند بالكامل. تم شرح هذا الحدث بالفعل في فصل jQuery Syntax .

انقر()

تقوم click()الطريقة بإرفاق وظيفة معالج الحدث بعنصر HTML.

يتم تنفيذ الوظيفة عندما ينقر المستخدم على عنصر HTML.

يوضح المثال التالي: عند تشغيل حدث نقرة على <p>عنصر ؛ إخفاء <p>العنصر الحالي:

مثال

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

ديبل كليك ()

تقوم dblclick()الطريقة بإرفاق وظيفة معالج الحدث بعنصر HTML.

يتم تنفيذ الوظيفة عندما ينقر المستخدم نقرًا مزدوجًا فوق عنصر HTML:

مثال

$("p").dblclick(function(){
$(this).hide();
});

Mouseenter ()

تقوم mouseenter()الطريقة بإرفاق وظيفة معالج الحدث بعنصر HTML.

يتم تنفيذ الوظيفة عندما يدخل مؤشر الماوس إلى عنصر HTML:

مثال

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

ترك الماوس()

تقوم mouseleave()الطريقة بإرفاق وظيفة معالج الحدث بعنصر HTML.

يتم تنفيذ الوظيفة عندما يترك مؤشر الماوس عنصر HTML:

مثال

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

الفأرة ()

تقوم mousedown()الطريقة بإرفاق وظيفة معالج الحدث بعنصر HTML.

يتم تنفيذ الوظيفة ، عند الضغط على زر الفأرة الأيسر أو الأوسط أو الأيمن ، بينما يكون الماوس فوق عنصر HTML:

مثال

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

فأرة ()

تقوم mouseup()الطريقة بإرفاق وظيفة معالج الحدث بعنصر HTML.

يتم تنفيذ الوظيفة ، عند تحرير زر الماوس الأيسر أو الأوسط أو الأيمن ، بينما يكون الماوس فوق عنصر HTML:

مثال

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

يحوم()

تأخذ الطريقة hover()وظيفتين وهي مزيج من الطرق mouseenter()و .mouseleave()

يتم تنفيذ الوظيفة الأولى عندما يدخل الماوس عنصر HTML ، ويتم تنفيذ الوظيفة الثانية عندما يترك الماوس عنصر HTML:

مثال

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

التركيز()

تقوم focus()الطريقة بإرفاق وظيفة معالج الحدث بحقل نموذج HTML.

يتم تنفيذ الوظيفة عندما يتم التركيز على حقل النموذج:

مثال

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

طمس ()

تقوم blur()الطريقة بإرفاق وظيفة معالج الحدث بحقل نموذج HTML.

يتم تنفيذ الوظيفة عندما يفقد حقل النموذج التركيز:

مثال

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

طريقة on ()

تقوم on()الطريقة بإرفاق واحد أو أكثر من معالجات الأحداث للعناصر المحددة.

إرفاق حدث نقرة <p>بعنصر:

مثال

$("p").on("click", function(){
$(this).hide();
});

إرفاق معالجات أحداث متعددة إلى <p>عنصر:

مثال

$("p").on({
mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

تمارين مسج