أحدث البرامج التعليمية وتطوير الشبكة
 

jQuery طرق الحدث

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

مسج هي مصممة خصيصا للرد على الأحداث في صفحة HTML.

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

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

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

الأمثلة على ذلك:

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

مصطلح "fires/fired" غالبا ما يستخدم مع الأحداث. على سبيل المثال: "إن keypress وأطلق الحدث، لحظة كنت اضغط مفتاح".

وفيما يلي بعض الأحداث DOM المشتركة:

أحداث الماوس لوحة المفاتيح الأحداث أحداث النموذج وثيقة / نافذة الأحداث
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

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

في مسج، معظم أحداث DOM لديها طريقة مسج ما يعادلها.

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

$("p").click();

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

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

وشاع استخدام مسج طرق الحدث

$(document).ready()

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

click()

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

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

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

مثال

$("p").click(function(){
    $(this).hide();
});
انها محاولة لنفسك »

dblclick()

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

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

مثال

$("p").dblclick(function(){
    $(this).hide();
});
انها محاولة لنفسك »

mouseenter()

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

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

مثال

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});
انها محاولة لنفسك »

mouseleave()

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

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

مثال

$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});
انها محاولة لنفسك »

mousedown()

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

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

مثال

$("#p1").mousedown(function(){
    alert("Mouse down over p1!");
});
انها محاولة لنفسك »

mouseup()

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

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

مثال

$("#p1").mouseup(function(){
    alert("Mouse up over p1!");
});
انها محاولة لنفسك »

hover()

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

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

مثال

$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You now leave p1!");
});
انها محاولة لنفسك »

focus()

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

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

مثال

$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});
انها محاولة لنفسك »

blur()

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

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

مثال

$("input").blur(function(){
    $(this).css("background-color", "#ffffff");
});
انها محاولة لنفسك »

و on() الطريقة

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

إرفاق الحدث انقر فوق ل <p> العنصر:

مثال

$("p").on("click", function(){
    $(this).hide();
});
انها محاولة لنفسك »

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

مثال

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});
انها محاولة لنفسك »

اختبر نفسك مع تمارين!

التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »

مسج طرق الحدث

للإشارة الحدث مسج الكاملة، يرجى زيارة موقعنا مسج الأحداث المرجعي .


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