طرق الأحداث jQuery

الأحداث هي العمليات التي يمكن للبرامج الويب اكتشافها.

يقدم jQuery طريقة بسيطة لربط معالج الحدث مع العناصر المختارة.

سيتم تنفيذ الوظيفة المقدمة عند تحدث الحدث.

هذه هي أمثلة الأحداث:

• تحميل الصفحة

• نقر على العنصر

• تحريك الفأرة فوق العنصر

• إرسال استمارة HTML

• الضغط على الأزرار على لوحة المفاتيح

نحوجية jQuery للأحداث

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

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

$("p").click();

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

$("p").click(function(){
　　// ... الحركة التي يجب تنفيذها ...
　　});

في هذا المثال، سيتم إخفاء الفقرة عند النقر على الصفحة:

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

في هذا المثال، سيتم إضافة وظيفة "changeSize" إلى حدث النقر:

$(document).ready(function(){
　　$("p").click(changeSize);
});
function　changeSize()　{
　　$(this).animate({fontSize: "+=5px"});
}

طرق الأحداث jQuery الشائعة

$（document）.ready()

jQuery $(document).ready()يحدد هذا الطريقة ما يجب تنفيذه عند تحميل DOM بالكامل.

في هذا المثال، سيتم عرض رسالة عند تحميل DOM:

$(document).ready(function(){
　　الآن تم تحميل DOM، يمكنه تنفيذ العمليات.
});

click()}}

jQuery click()}}يضيف معالج أحداث الدالة إلى العنصر المحدد.

سيتم تنفيذ هذه الدالة عند ضغط المستخدم على العنصر:

$("p").click(function(){
　　$(this).css({"background-color":"#007FFF",　"color":"white"});
});

mouseenter()

jQuery mouseenter()يضيف معالج أحداث الدالة إلى العنصر المحدد.

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

$("p").mouseenter(function(){
　　$(this).css("background-color",　"yellow");
});

mouseleave()

jQuery mouseleave()يضيف معالج أحداث الدالة إلى العنصر المحدد.

سيتم تنفيذ هذه الدالة عند مغادرة مؤشر الفأرة العنصر:

$("p").mouseleave(function(){
　　$(this).css("background-color",　"lightblue");
});

mousedown()

jQuery mousedown()يضيف معالج أحداث الدالة إلى العنصر المحدد.

سيتم تنفيذ هذه الدالة عند ضغط المستخدم على مفتاح الفأرة في العنصر:

$("p").mousedown(function(){
　　$(this).after("<p　style='color:red;'>ضغط مفتاح الفأرة</p>");
});

mouseup()

jQuery mouseup()يضيف معالج أحداث الدالة إلى العنصر المحدد.

سيتم تنفيذ هذه الدالة عند إطلاق مفتاح الفأرة عند وضعها على العنصر:

$("p").mouseup(function(){
　　$(this).after("<p　style='color:green;'>إطلاق مفتاح الفأرة</p>");
});

keydown()

jQuery keydown()يضيف معالج أحداث الدالة إلى العنصر المحدد.

سيتم تنفيذ هذه الدالة عند ضغط المستخدم على مفتاح مفاتيح لوحة المفاتيح:

$("input").keydown(function(event){
　　$(this).css("background-color",　"yellow");
　　$("span").text(event.type);
});

keyup()

jQuery keyup()يضيف معالج أحداث الدالة إلى العنصر المحدد.

سيتم تنفيذ هذه الدالة عند انسلاك المستخدم من مفتاح مفاتيح لوحة المفاتيح:

$("input").keyup(function(event){
　　$(this).css("background-color",　"lightblue");
　　$("span").text(event.type);
});

hover（）

jQuery hover()يحتوي الطريقة على اثنين من الدوال، وهيmouseenter()وmouseleave()مجموعات الطرق.

التشبيه التالي سيقوم بتعيين لون الخلفية عند وضع المؤشر فوق جميع<p>لون الخلفية للعنصر:

$("p").hover(function(){
　　$(this).css("background-color",　"yellow");
　　},　function(){
　　$(this).css("background-color",　"lightblue");
});

طريقة "on()"

يقدم jQueryالطريقةطريقة واحدة للرد على أي أحداث تحدث على العنصر المحدد.

استخدامالطريقةيمكننا إضافة عدة معالجات أحداث إلى العنصر المحدد.

التشبيه التالي سيقوم بتعيين حدث "click" على جميع<p>العنصر:

$("p").on("click",　function(){
　　$(this).css("background-color", "coral");
});

في هذا المثال، يتم إضافة حدث mouseenter إلى جميع<p>العنصر:

$("p").on("mouseenter", function(){
　　$(this).css("background-color", "coral");
});

في هذا المثال، يتم إضافة عدة معالجات أحداث إلى<div>العنصر:

$("div").on("mouseenter　mouseleave　click", function(){
　　$(this).text(Math.random());
});

الطريقة

jQuery الطريقة 　الطريقةالطريقةعندما يتم إضافة معالج الحدث المحدد في الطريقة

السؤال من<div>إزالة حدث mousemove من العنصر:

$("button").click(function(){
　　$("div").off("mousemove");
});

جسم الحدث

يُعتمد نظام أحداث jQuery وفقًا للمواصفات القياسية لـ W3C على جسم الحدث.

تأكد من نقل جسم الحدث إلى معالج الحدث.

كل معالج حدث يتلقى جسم الحدث الذي يحتوي على العديد من الخصائص والطرق.

$("div").on("click", function(event){
　　alert("نوع الحدث هو " + event.type);
　　alert("الهدف: " + event.target.innerHTML);
});

يظهر الجدول أدناه جميع طرق جسم الحدث Özel وخصائصها:

مرجع أحداث jQuery

للحصول على مرجع كامل للأحداث، يرجى زيارةدليل مرجعي أحداث jQuery.