jQuery 3.3

.delegate()




jquery

.delegate (selector، eventType، handler) الإرجاع: إصدار jQuery deprecated: 3.0

الوصف: قم بإرفاق معالج بأحد الأحداث أو أكثر لكافة العناصر التي تطابق المحدد ، الآن أو في المستقبل ، استنادًا إلى مجموعة محددة من عناصر الجذر.

  • الإصدار المضاف: 1.4.2 .delegate (محدد ، eventType ، معالج)

    • منتخب
      اكتب: String
      محدد لتصفية العناصر التي تؤدي إلى الحدث.
    • نوع الحدث
      اكتب: String
      سلسلة تحتوي على واحد أو أكثر من أنواع أحداث JavaScript مفصولة بمسافات ، مثل "click" أو "keydown" أو أسماء أحداث مخصصة.
    • معالج
      النوع: Function ( Event eventObject)
      دالة يتم تنفيذها في وقت تشغيل الحدث.
  • الإصدار المضافة: 1.4.2 .delegate (محدد ، eventType ، eventData ، معالج)

    • منتخب
      اكتب: String
      محدد لتصفية العناصر التي تؤدي إلى الحدث.
    • نوع الحدث
      اكتب: String
      سلسلة تحتوي على واحد أو أكثر من أنواع أحداث JavaScript مفصولة بمسافات ، مثل "click" أو "keydown" أو أسماء أحداث مخصصة.
    • eventData
      النوع: Anything
      كائن يحتوي على بيانات سيتم تمريرها إلى معالج الحدث.
    • معالج
      النوع: Function ( Event eventObject)
      دالة يتم تنفيذها في وقت تشغيل الحدث.
  • الإصدار المضافة: 1.4.3 .delegate (محدد ، أحداث)

    • منتخب
      اكتب: String
      محدد لتصفية العناصر التي تؤدي إلى الحدث.
    • أحداث
      اكتب: PlainObject
      عنصر بسيط لواحد أو أكثر من أنواع الأحداث والوظائف لتنفيذها.

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

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

على سبيل المثال ، التعليمة البرمجية .delegate() التالية:

$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});

يعادل الشفرة التالية مكتوبة باستخدام .on() :

$( "table" ).on( "click", "td", function() {
  $( this ).toggleClass( "chosen" );
});

لإزالة الأحداث المرفقة مع delegate() ، راجع طريقة .undelegate() .

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

ملاحظات إضافية:

  • نظرًا لأن أسلوب .live() يعالج الأحداث بمجرد نشرها إلى أعلى المستند ، لا يمكن إيقاف نشر الأحداث المباشرة. وبالمثل ، فإن الأحداث التي .delegate() سوف تنتشر إلى العناصر التي تم تفويضها إليها ؛ سيتم بالفعل تنفيذ معالجات الأحداث المرتبطة بأي عناصر تحتها في شجرة DOM في الوقت الذي يتم فيه استدعاء معالج الحدث المفوض. لذلك ، قد تمنع هذه المعالجات المعالج المفوض من التشغيل عن طريق استدعاء event.stopPropagation() أو إرجاع false .

أمثلة:

انقر فقرة لإضافة أخرى. لاحظ أن .delegate () بإرفاق معالج حدث انقر فوق كافة الفقرات - حتى الجديدة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delegate demo</title>
  <style>
  p {
    background: yellow;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
  }
  p.over {
    background: #ccc;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Click me!</p>
 
<span></span>
 
<script>
$( "body" ).delegate( "p", "click", function() {
  $( this ).after( "<p>Another paragraph!</p>" );
});
</script>
 
</body>
</html>

عرض:

لعرض نص كل فقرة في مربع التنبيه عندما يتم النقر فوقه:

$( "body" ).delegate( "p", "click", function() {
  alert( $( this ).text() );
});

لإلغاء إجراء افتراضي ومنعه من الاحتراق ، اعرض خطأ:

$( "body" ).delegate( "a", "click", function() {
  return false;
});

لإلغاء الإجراء الافتراضي فقط باستخدام طريقة preventDefault.

$( "body" ).delegate( "a", "click", function( event ) {
  event.preventDefault();
});

يمكن ربط الأحداث المخصصة أيضًا.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delegate demo</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
 
<script>
$( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
  $( this ).text( "Hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
});
$( "button" ).click(function() {
  $( "p" ).trigger( "myCustomEvent" );
});
</script>
 
</body>
</html>

عرض: