تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: اذهب أبعد من ذلك في إدارة الأحداث


الصفحة السابقة
في هذه المرحلة من المحاضرة ، سوف تتعرف على كيفية إعداد إدارة الأحداث المتعلقة بالماوس ولوحة المفاتيح والعناصر المعروضة على صفحة ويب. أقترح الانتقال إلى أبعد من ذلك من خلال إظهار كيفية التعامل مع أحداث متعددة بطريقة واحدة ، أو تشغيل الأحداث بكود jQuery أو استخدام تفويض الأحداث للحد من الكود.

أحداث مخصصة


دون معرفة ذلك ، لقد استخدمت الإصدار المبسط من الطريقة on() في جميع أساليب الحدث التي تمت دراستها حتى الآن. يعطي الجدول التالي بعض المراسلات بين الطرق التقليدية والأساليب on() المكافئة.
الطريقة التقليدية أي ما يعادل طريقة ()
$(sel).click(function() {…}) $(sel).on('click', function() {…})
$(sel).scroll(function() {…}) $(sel).on('scroll', function() {…})
$(sel).keydown(function() {…}) $(sel).on('keydown', function(){…})
$(sel).focus(function() {…}) $(sel).on('focus', function() {…})
$(sel).load(function() {…}) $(sel).on('load', function() {…})
في كل هذه التعبيرات ، sel يمثل أي محدد jQuery .
أعتقد أنك فهمت منطق تحويل أي طريقة حدث تقليدي إلى ما يعادلها on() : ما عليك سوى تحديد اسم الحدث في المدخل الأولى للطريقة ، وعلامات الاقتباس ، وتحديد وظيفة الحدث في المدخل الثاني .
ولكن بعد ذلك ، لماذا استخدام الطريقة on() وأستبعد الأساليب التقليدية؟
كما سنرى ، فإن الطريقة on() لها العديد من المزايا . هي تسمح بـ:
  • التقصيرفي الكتابة عن طريق ربط طريقة الحدث نفسها بعدة عناصر ؛
  • ربط أساليب الحدث متعددة لعنصر في عبارة واحدة
  • تعطيل طريقة حدث مكتوبة مسبقًا بالطريقة on()؛
  • ربط عدة أساليب الحدث مع بعضها البعض. وبالتالي ، يمكنك تشغيلها جميعًا ، أو تعطيلها جميعًا في عبارة jQuery واحدة.
طريقة واحدة للتعامل مع أحداث متعددة
نفترض أنك تريد ربط أساليب الحدث mouseenter() و mousemove() للعلامات <img> . تقليديا ، سوف تستخدم التعليمات التالية:

$('img').mouseenter(function() { … }
$('img').mousemove(function() { … }     
إذا استعملت الطريقة on()، فستكفي عبارة واحدة فقط:

$('img').on('mouseenter mousemove', function() { … })     
كما ترى ، كل ما عليك فعله هو تمرير أساليب الأحداث في الوسيطة الأولى للطريقة من on() خلال تضمينها بين علامات اقتباس وفصلها بمسافة.
عدة طرق في تعليمة واحدة
الآن تخيل أنك تريد ربط المهام traitement1 و traitement2 بالأحداث mouseenter و mousemove للعلامات <img> للكلاس grand . سوف تستخدم التعليمات التالية:

$('img.grand').mouseenter(traitement1);
$('img.grand').mousemove(traitement2);     
باستخدام الطريقة on() ، يكفي سطر واحد لربط العمليتين بأحداث الصور للكلاس grand :

$('img.grand').on({mouseenter:traitement1, mousemove:traitement2});     
هذه الحالة الخاصة معممة: لربط عدة أحداث وعدة وظائف معالجة بالعناصر المحددة بواسطة محدد jQuery ، حدد الأحداث المختلفة كمدخلات للطريقة on()، مع مراعاة القواعد التالية:
  • يجب أن يتبع كل حدث الحرف ":" ووظيفة المعالجة المرتبطة به ؛
  • الأحداث مفصولة بفاصلة.
  • الأحداث محاطة بأقواس.
تعطيل طريقة إدارة الأحداث
إذا كانت الطريقة on() تعلق حدثًا بعنصر ، في رأيك ، ما الطريقة التي تفصل الحدث نفسه؟ كما تتوقع ، هذه هي الطريقة off() .
سوف نسمح بحظر هذا الحدث click على الصورة باستخدام الأساليب on() و off() .

انقر على الصورة بعد تفعيل النقرة <br />
<img src="canard.jpg" id='image'><br />
<button id="activer">فعًل النقر</button>
<button id="desactiver">عطًل النقر</button>

<script src="jquery.js"></script>
<script>
  $(function() {
    function traitement() {
      alert(' لقد وقع النقر على الصورة');
    }  
    $('#activer').on('click', function() {
      $('#image').click(traitement);
    });
    $('#desactiver').on('click', function() {
      $('#image').off('click', traitement);
    });
});
</script>      
traitement() تعرض الوظيفة مربع حوار مع وظيفة JavaScript alert() . سيتم استدعاء هذه الوظيفة عندما ينقر المستخدم على الصورة ، بشرط أن تكون طريقة إدارة الأحداث click() مرتبطة بالصورة.

$(function() {
  function traitement() {
  alert(' لقد وقع النقر على الصورة');
}      
عندما ينقر المستخدم على زر المعرف #activer ، يتم إرفاق طريقة إدارة الأحداث click() بصور المعرف #image . مع كل نقرة على الصورة ، سيتم تنفيذ الوظيفة traitement() :

$('#image').click(traitement);      
عندما ينقر المستخدم على زر المعرف #desactiver، يتم فصل طريقة إدارة الأحداث click() عن صورة المعرف #image :

$('#image').off('click', traitement);      
تسمية عدة طرق الحدث
لقد تعلمت كيفية إرفاق طريقة حدث مع محدد باستخدام الطريقة on() . على سبيل المثال ، لإرفاق طريقة حدث يتوافق مع حدث "بداية تحليق مؤشر الماوس" للعلامات <img> ، يمكنك استخدام هذا البيان:

$('img').on('mouseenter', function() {...});      
لإزالة طريقة الحدث هذه ، يمكنك استخدام هذا البيان:

$('img').off('mouseenter');     
كل هذا يعمل تماما طالما كنت تستخدم مكتبة jquery دون أي ملحق. من ناحية أخرى ، إذا تم استخدام مكون إضافي واحد أو أكثر (فصل مخصص له) ، فقد يحددون أساليب الحدث الخاصة بهم ويرفقونها بنفس محدداتك. إذا كنت تستخدم الطريقة off() عن طريق تحديد اسم الحدث ، كما في البيان السابق ، فسيتم حذف جميع أساليب الحدث المقابلة لهذا الحدث: طرقك ، ولكن أيضًا الطرق التي قد يتم تعريفها في المكونات الإضافية التي تستخدمها. نتيجة لذلك ، قد لا تعمل هذه الإضافات بعد الآن!
العرض الأول
في القسم الفرعي "تعطيل طريقة إدارة الأحداث" ، رأيت أنه من الممكن إنشاء وظيفة معالجة JavaScript ، وتحديد اسمها عند تعيين طريقة حدث على محدد. على سبيل المثال ، لإرفاق طريقة حدث يتوافق مع الحدث " <img> بداية تحليق مؤشر الماوس " عن طريق تمرير المعالجة إلى الوظيفة actions() ، يمكنك استخدام إحدى العبارات التالية:

$('img').mouseenter(actions);
$('img').on('mouseenter', actions);     
بالطبع ، ستحتاج إلى تحديد الوظيفة actions() للإشارة إلى العلاج الذي يجب إجراؤه:

function actions() {
  // أدخل تعليمات العلاج المناسبة
}    
وبالتالي ، يمكنك حذف طريقة الحدث هذه دون لمس أي عناصر آخرين قد يكونوا مرتبطين بالحدث mouseenter . لذلك ، سوف تستخدم هذه التعليمات:

$('img').off('mouseenter', actions);     
العرض الثاني
يمكنك تعيين "مساحة الاسم" ( namespace ) في أساليب الحدث الخاص بك. لا تخف بهذا الاسم في jQuery ، يمكن مقارنة مساحة الاسم بفئة CSS . الغرض منه هو إعطاء تسمية لواحد أو أكثر من أساليب الحدث لتسهيل استعمالها. بمجرد وضع علامة على أساليب الأحداث الخاصة بك ، يمكنك حذفها بسهولة دون التأثير على أساليب الأحداث التي يمكن تعريفها في المكونات الإضافية التي تستخدمها.
ابدأ باختيار مساحة الاسم . لنفترض أنك تستخدم jQuery لتطوير موقع مرتبط باستكشاف أخطاء الكمبيوتر وإصلاحها ، يمكنك استخدام مساحة الاسم "depanPC" لأي أساليب حدث تحددها. سيتم إضافة مساحة الاسم هذا بشكل منهجي في كل مرة تستخدم فيها هذه الطريقة on() . مثلا :

$('img').on('mouseenter.depanPC', function() { //traitement });
$('img').on('mouseleave.depanPC', function() { //traitement });
$('img').on('mousemove.depanPC', function() { //traitement });     
كما ترى ، ما عليك سوى إضافة نقطة متبوعة بمساحة الاسم لكل حدث. عندما تريد حذف طريقة الحدث mouseleave() التي قمت بإعدادها ، فستستخدم العبارة التالية:

$('img').off('mouseleave.depanPC');     
هذا البيان لن يزيل أي أساليب حدث أخرى قد تكون محددة في المكونات الإضافية التي تستخدمها. يمكنك حذف أساليب أحداث متعددة متعلقة بمساحة اسم في عبارة واحدة. نفترض أنك تريد حذف أساليب الحدث mouseenter() و mouseleave() ذات الصلة بمساحة الاسم "depanPC" . سوف تستخدم البيان التالي:

$('img').off('mouseenter.depanPC mouseleave.depanPC');     
نفترض الآن أنك تريد حذف جميع أساليب الأحداث المرتبطة بمساحة الاسم "depanPC" . لهذا ، سوف تستخدم العبارة التالية:

$('img').off('.depanPC');
أخيرًا ، يمكنك إزالة أساليب الأحداث المرتبطة بمساحات أسماء متعددة في عبارة واحدة. على سبيل المثال ، لإزالة مساحات الأسماء "depanPC" و "depanMAC" من جميع أساليب الأحداث ذات الصلة بالحدث click المطبقة على العلامات <img>، ستستخدم العبارة التالية:

$('img').off('click.depanPC.depanMAC');
أو لإزالة مساحات الأسماء "depanPC" و "depanMAC" من جميع أساليب الأحداث المطبقة على العلامات <a>، ستستخدم العبارة التالية:

$('a').off('.depanPC.depanMAC');
في الوقت الحالي ، قد لا تتمكن من معرفة ما ستفعله مساحات الأسماء بالنسبة لك ، ولكن كن مطمئنًا ، فسيصبح كل شيء واضحًا عند تعريفك لإضافات jQuery الخاصة بك.

إدارة الأحداث الفريدة


من الضروري في بعض الأحيان الرد على حدث ما عند حدوثه لأول مرة ، ثم تجاهله jQuery . لديه طريقة لذلك: one() . دعونا نرى كيفية تنفيذ هذه الطريقة مع بضعة أسطر من التعليمات البرمجية. في هذا المثال ، يمكن للمستخدم النقر فوق صورة. سيتم أخذ النقرة الأولى في الاعتبار ، وسيتم تجاهل النقرات الأخرى.

أنقر على الصورة<br />
<img src="bon.gif"><br />
<span id='message'></span>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('img').one('click', function() {
      $('#message').text('لقد نقرت على الصورة. من الآن فصاعدًا ، سأظل غير حساس تجاه النقرات').fadeIn(1000).fadeOut(5000);
    });
  });
</script>
يحتوي نص المستند على نص وصورة وعلامة تُعرض <span> فيها رسالة بعد النقرة الأولى على الصورة. يُعد كود jQuery طريقة حدث للاستخدام مرة واحدة في حدث click العلامة <img> :

$('img').one('click', function() {
عند النقر فوق الصورة لأول مرة ، يتم عرض نص في العلامة <span> باستخدام الطريقة text() . ويرتبط هذا الأسلوب مع الطرق fadeIn() و fadeOut() وهو ما ينجر عنه ظهور رسالة في ثانية واحدة ( fadeIn(1000)) وتختفي الرسالة في خمس ثوان ( fadeOut(5000)) .

الأحداث المثيرة


عادةً ما يتم تشغيل الأحداث من قبل المستخدم ، عند النقر فوق كائن ، أو استخدام عجلة الماوس ، أو الضغط على مفتاح على لوحة المفاتيح ، على سبيل المثال. في بعض الحالات ، قد يكون من الضروري تشغيل حدث دون مساعدة المستخدم ، وذلك باستخدام تعليمة jQuery . لهذا ، سوف تستخدم الطريقة trigger() ، وهي بناء الجملة:

$(sel).trigger('ev');
حيث يمثل sel أي محدد jQuery في حين ev هو الحدث الذي سيقوم به.
فقط الأحداث التالية يمكن أن نستعملها في هذه الحالة: blur ، change ، click ، dblclick ، error ، focus ، keydown ، keypress ، keyup ، select و submit .
دعونا نرى كيفية استخدام الطريقة trigger() في الممارسة العملية. يطلب هذا المثال من المستخدم النقر فوق صورة. ثم يتم عرض رسالة في علامة <span> . يمكن للمستخدم أيضا النقر فوق زر. في هذه الحالة ، يكون إجراء الحدث مرتبطًا بالنقر فوق الزر الذي يؤدي إلى عرض الرسالة.

أنقر على الصورة<br />
<img src="bon.gif"><br />
<span id='message'></span><br />
<button>Cliquez ici</button>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('img').click(function() {
      $('#message').text('تم النقر على الصورة.').fadeIn(1000).fadeOut(1000);
    });
    $('button').click(function() {
      $('img').trigger('click');
    });  
  });
  </script>
يحدد البيان التالي طريقة الحدث المرتبطة بنقرة زر:

$('button').click(function() {
يتكون العلاج من محاكاة النقر على الصورة:

$('img').trigger('click');
يتم عرض الرسالة "تم النقر على الصورة" عند النقر فوق الصورة أو الزر.
قد يكون من المثير للاهتمام نشر رسالة في حالة النقر فوق الصورة ورسالة أخرى في حالة النقر فوق الزر. هنا هو الرمز المستخدم:

أنقر على الصورة<br />
<img src="bon.gif"><br />
<span id='message'></span><br />
<button>Cliquez ici</button>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('img').click(function(event,texte) {
      if (texte == undefined)
        texte = " بواسطتك ";
      $('#message').text('تم النقر على الصورة ' + texte).fadeIn(1000).fadeOut(1000);
    });
    $('button').click(function() {
      $('img').trigger('click', 'بواسطة jQuery');
    });
  });
</script>
كما ترون ، تم تغيير كود jQuery فقط. الآن ، الدالة لها مدخلان:

$('img').click(function(event,texte) {
سيتم استبدال المدخل Event باسم الحدث عند حدوثه. هنا ، event تصبح مساوية ل click عندما يتم النقر على الصورة. على العكس ، texte هي مدخل إضافي يمكن أن يُؤخذ في الاعتبار عند معالجة طريقة الحدث. عندما ينقر المستخدم على الصورة ، لا يتم تمرير أي مدخل texte إلى طريقة إدارة الأحداث. المدخل texte بالتالي غير محدد) undefined ) في هذه الحالة ، يجب تعيين القيمة "بواسطتك" حتى تظهر الرسالة " تم النقر فوق الصورة" في العلامة <span> :

if (texte == undefined)
   texte = " بواسطتك ";
تحتوي الرسالة المعروضة على جزء ثابت ("تم النقر على الصورة") وجزء متغير ( texte) يعتمد على العنصر الذي نقر عليه المستخدم. تحاكي طريقة الحدث المرتبطة بالضغط على الزر دائمًا نقرة على الصورة ، لكن هذه المرة يتم تمرير النص "بواسطة jQuery " إلى طريقة $('img').click() لتعديل النص المعروض في العلامة <span>

$('button').click(function() {
  $('img').trigger('click', 'بواسطة jQuery');
});
من الضروري في بعض الأحيان تمرير العديد من الوسائط إلى الأسلوب trigger() . في هذه الحالة ، ضعها بين قوسين مربعين ، مثل هذا:

$(sel).trigger('ev', ['param1', 'param2', 'param3', 'etc.']);
... حيث:
  • Sel هو أي محدد jQuery
  • Ev هو الحدث لمحاكاة.
  • param1 ، param2، param3 وما بعدها إن وجدت هي المعايير لتمريرها إلى أسلوب الحدث الناجمة عن طريقة trigger() .

إنشاء أحداث مخصصة


بعد أن وصلت إلى هذه النقطة في قراءة هذه الدورة التدريبية ، أنت تعرف كيفية إنشاء أساليب الحدث باستخدام هذه الطريقة on() . على سبيل المثال ، تطبق الإرشادات التالية طريقة حدث تعرض مربع حوار عندما ينقر المستخدم على معرف عنصر #calcul :

$('#calcul').on("click", function() {
  alert("لقد نقرت على العنصر المعرف ب #calcul");
});
طريقة on() يمكن أن تستخدم أيضا لتحديد طرق أحداث مخصصة. هنا ، على سبيل المثال ، نحدد الحدث المخصص bonjour_jquery ونربطه بعنصر معرف #bonjour :

$('#bonjour').on('bonjour_jquery', function() {
  alert('jQuery يقول لك صباح الخير !');
});
لتشغيل الحدث المخصص bonjour_jquery عند النقر فوق عنصر معرف #bonjour ، ستستخدم الطريقة trigger() :

$('#bonjour').trigger('bonjour_jquery');
فيما يلي مثال على الكود الكامل:

<button id="bonjour">أنقر هنا</button>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#bonjour').on('bonjour_jquery', function() {
      alert('jQuery يقول لك صباح الخير !');
    });
    $('#bonjour').click(function() {
      $('#bonjour').trigger('bonjour_jquery');
    });  
  });
</script>
يحتوي نص المستند على زر معرف #bonjour . يعرّف كود jQuery الحدث المخصص bonjour_jquery ويجعله يعرض مربع رسالة:

$('#bonjour').on('bonjour_jquery', function() {
  alert('jQuery يقول لك صباح الخير !');
});
تحدد الإرشادات التالية طريقة حدث للنقر فوق زر المعرف #bonjour :

$('#bonjour').click(function() {
تقوم هذه الطريقة بتشغيل الحدث bonjour_jquery، وبالتالي تعرض مربع الرسالة المحدد في هذه الطريقة:

$('#bonjour').trigger('bonjour_jquery');
هل من الممكن تمرير المدخلات إلى إجراء حدث مخصص؟
هذا ممكن تماما. هنا هو رمز للاستخدام:

<button id="bonjour">أنقر هنا</button>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#bonjour').on('bonjour_jquery', function(event, param) {
      alert(param + ', jQuery يقول لك صباح الخير !!');
    });
    $('#bonjour').click(function() {
      $('#bonjour').trigger('bonjour_jquery', 'Michel');
    });  
  });
</script>
كما ترون ، يتم تمرير مدخلين إلى دالة الإرجاع:

$('#bonjour').on('bonjour_jquery', function(event, param) {
استخدم المدخل المنقول كما تراه مناسبًا. هنا على سبيل المثال ، يتم دمجه في النص المعروض بواسطة مربع الرسالة:

alert(param + ', jQuery يقول لك صباح الخير !!');
عند تشغيل الحدث المخصص bonjour_jquery، ما عليك سوى تمرير قيمة في المدخل الثاني للطريقة trigger() :

$('#bonjour').trigger('bonjour_jquery', 'Michel');
والنتيجة هي في الشكل التالي.
jQuery web

تفويض الأحداث


يستخدم jQuery بشكل متكرر لإضافة عناصر إلى صفحة ويب. بدلاً من إرفاق معالج حدث لكل عنصر من العناصر المدرجة ، يمكنك تحديد مستمع حدث على الأب. للقيام بذلك ، يجب عليك استخدام الأسلوب on() مع ثلاث وسائط:

$('#del').on('ev', 'sel', function () {
  // واحد أو أكثر من التعليمات
});
... حيث:
  • Del هو العنصر الذي سيتم الاستماع إلى الأبناء عليه ؛
  • Ev هو اسم الحدث المعني ؛
  • Sel هو محدد يشير إلى نوع الأبناء الذين تم الاستماع إليهم ؛
  • function() هي وظيفة التنفيذ عند ev اكتشاف الحدث .
عند ev حدوث الحدث على sel عنصر تابع للعنصر $('#del')، يتم تنفيذ الوظيفة.

sel 
دعونا نرى كيف تعمل هذه الطريقة في الممارسة العملية. في المثال التالي ، سوف نحدد علامة <div> ونعدل خصائصها باستخدام بعض إرشادات CSS ، ونخصص إدارة الأحداث لأبناءها <div> في الحدث click . عند حدوث هذا الحدث ، سيتم إنشاء علامة من نفس النوع بعد النقر على العلامة ، وبالتالي سيتم تعيين إدارة الأحداث للعلامة التي تم النقر عليها لأنها في نفس المستوى.
في الشكل التالي ، يؤدي النقر فوق العنصر الأصلي إلى إنشاء عنصر آخر بنفس الوتيرة وسلوك الحدث نفسه (1) . يؤدي النقر الثاني على العنصر الأصلي إلى إنشاء عنصر ثان بنفس الوتيرة وسلوك الحدث نفسه (2) . نظرًا لأن العنصر الأول الذي تم إنشاؤه له نفس سلوك الحدث الذي ينتمي إليه ، فمن الممكن أيضًا النقر فوق هذا العنصر لإنشاء نسخة حدث(3) .
jQuery web
استنساخ سلوك العنصر الأصلي
بالنسبة لأولئك الذين هم على مقربة من الإغماء ، هنا (أخيرًا!) كود صغير:

<style>
  div { 
    background:yellow; 
    font-weight:bold; 
    cursor:pointer; 
    padding:8px; 
  }
</style>

<div id="master">
  <div>أنقر هنا لاظافة  <div></div>
</div>

<script src="jquery.js"></script>
<script>
  $('#master').on('click', 'div', function(){
    $(this).after('<div>هذا <div> له نفس خصائص<div>  الأب </div>');
  });
</script>
يحتوي نص المستند على علامتين متداخلتين<div> . علامة الحاوية ( #master) هي التي يتم إعادة إنتاج سلوكها الفرعي <div> . يقوم كود CSS بتنسيق علامات <div> المستند: خلفية صفراء ، ودهون حرف تمت تهيئتها bold، وتحول مؤشر الماوس إلى يد ، كما تم تعيين هوامش داخلية على 8 بكسل.
دعنا نلقي نظرة على كود jQuery الذي يسبب استنساخ الحدث:

$('#master').on('click', 'div', function(){
  $(this).after('<div>هذا <div> له نفس خصائص<div>  الأب </div>');
});
عندما يُنقر على عنصر <div>الابن لعنصر بتحديد #master( $('#master')) ( on('click', 'div', …))، يتم تنفيذ وظيفة العودة. تقوم هذه الوظيفة بإدراج علامة <div> ومحتوياتها ( <div>هذا <div> له نفس خصائص<div> الأب </div> ) بعد العنصر الذي تم النقر عليه للتو ( $(this).after(…)). يمكنك إما النقر فوق العلامة الأصلية <div>أو إحدى العلامات <div> المدرجة لإضافة علامة جديدة <div> بعد العلامة الأخيرة. لذلك تم استنساخ إدارة الأحداث.
يوضح الشكل التالي النتيجة التي تم الحصول عليها.
jQuery web
يوفر تفويض الأحداث ميزة لا يمكن إنكارها: فهو يسمح بتقليل عدد مديري الأحداث المعرفة في التعليمات البرمجية بنسب كبيرة. تخيل أن لديك عدة عشرات من العناصر المدرجة في الحاوية أثناء تشغيل كود jQuery . بدون تفويض للأحداث ، يجب عليك تحديد مدير حدث لكل منها!
لإزالة تفويض للأحداث ، ستستخدم الطريقة off() :

$('#del').off('ev', 'sel');
... حيث:
  • del هو العنصر الذي تم منه استنساخ معالج (معالجات) الحدث ؛
  • Ev هو اسم الحدث المعني ؛
  • Sel هو المحدد الذي يعمل بمثابة مرشح.
سنضيف زر أمر في الكود السابق لإزالة تفويض الأحداث.

<button id="suppr"> حذف تفويض الحدث </button>

$('#master').on('click', 'div', function(){
    $(this).after('<div>هذا <div> له نفس خصائص<div>  الأب </div>');
});
$('#suppr').on('click', function() {
  $('#master').off('click','div');
});
يلتقط رمز jQuery الحدث click على زر المعرف #suppr :

$('#suppr').on('click', function() {
عند حدوث هذا الحدث ، تتم إزالة تفويض الحدث باستخدام الطريقة off() :

$('#master').off('click','div');
  • ويمكن أن تظهر بعض الأحداث ببيان، وذلك باستخدام طريقة trigger() : blur ، change، click ، dblclick ، error ، focus ، keydown ، keypress ، keyup ، select و submit . على العكس، الأحداث التالية ليست مقبولة : load ، mousedown ، mouseout ، mouseover ، mousemove ، mouseup ، resize و unload .
  • من الممكن تحديد الأحداث المخصصة في jQuery ، باستخدام الطريقة on() . يمكن إنشاء الحدث الذي تم إنشاؤه بالطريقة trigger() .
  • يتيح تفويض الأحداث استنساخ إدارة الأحداث لعنصر واحد أو أكثر من أبناءه الذين تم إنشاؤهم في كود jQuery . بغض النظر عن عدد العناصر التي يتم إنشاؤها: سيتصرفون جميعًا (من وجهة نظر الحدث) كأب لهم. وهذا ، دون أي رمز إضافي يتم كتابتها.