الفرق بين المراجعتين لصفحة: «jQuery/delegate»

المراجعة الحالية بتاريخ 12:36، 5 يونيو 2018

`‎.delegate( selector, eventType, handler )‎`

أُهمِل مع الإصدار: 3.0.

القيمة المعادة

يُعيد كائنًا من النوع jQuery.

الوصف

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

`‎.delegate( selector, eventType, handler )‎`

أُضيف مع الإصدار: 1.4.2.

`selector`

سلسلة نصية تُحدد ترشيح العناصر التي تبدأ الحدث من النوع String.

`eventType`

سلسلة نصية تحتوي على واحد أو أكثر من أنواع أحداث JavaScript مفصولة بمسافات، مثل "click"، أو "keydown,‎"، أو أسماء أحداث مخصصة.

`handler`

دالة معالجة أحداث تُنفَّذ في وقت تشغيل الحدث، وهي من الشكل Function( Event eventObject )‎.

`‎.delegate( selector, eventType, eventData, handler )‎`

أُضيف مع الإصدار: 1.4.2.

`selector`

سلسلة نصية تُحدد ترشيح العناصر التي تبدأ الحدث من النوع String.

`eventType`

سلسلة نصية تحتوي على واحد أو أكثر من أنواع أحداث JavaScript مفصولة بمسافات، مثل "click"، أو "keydown,‎"، أو أسماء أحداث مخصصة.

`eventData`

كائن يحتوي على البيانات التي ستُمرر إلى مداول الحدث، ويمكن أن يكون من أي نوع من أنواع JavaScript.

`handler`

دالة معالجة أحداث تُنفَّذ في وقت تشغيل الحدث، وهي من الشكل Function( Event eventObject )‎.

`‎.delegate( selector, events )‎`

أُضيف مع الإصدار: 1.4.3.

`selector`

سلسلة نصية تُحدد ترشيح العناصر التي تبدأ الحدث، وهي من النوع String.

`events`

كائن بسيط من النوع Object لواحد أو أكثر من أنواع الأحداث والدوال لتنفيذها.

أهمل التابع ‎.delegate()‎ اعتبارًا من إصدار jQuery 3.0. وحل محله التابع ‎.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()‎ يعالج الأحداث بمجرد انتشارها (propagate) إلى أعلى المستند، فلا يمكن إيقاف انتشار أحداث live. وبالمثل، فإن الأحداث التي يعالجها التابع ‎.delegate()‎ سوف تنتشر إلى العناصر المفوَّضَة؛ وستُنفَّذ معالجات الأحداث المرتبطة بأي عناصر تحتها في شجرة DOM في الوقت الذي يُستدعى فيه معالج الحدث المفوَّض. لذلك، قد تمنع هذه المعالجات المعالجَ المفوَّض من التشغيل عن طريق استدعاء event.stopPropagation()‎ أو إعادة false.

أمثلة

انقر على فقرة <p> لإضافة أخرى. لاحظ أن ‎.delegate()‎‎ يُرفِق معالج للحدث click مع كافة الفقرات، حتى تلك التي لم تضف بعد:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delegate مثال على التابع</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>أنقر هما!</p>
 
<span></span>
 
<script>
$( "body" ).delegate( "p", "click", function() {
  $( this ).after( "<p>فقرة أخرى!</p>" );
});
</script>
 
</body>
</html>

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

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

لإلغاء إجراء افتراضي ومنعه من الانتشار إلى الأعلى (النمط bubble)، فأعد القيمة false من الدالة:

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

أما لإلغاء الإجراء الافتراضي باستخدام التابع preventDefault فقط:

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

يمكن ربط الأحداث المخصصة (custom events) أيضًا:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delegate مثال على التابع</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>مرفق معه حدث مخصص.</p>
<button>إطلاق حدث مخصص</button>
<span style="display:none;"></span>
 
<script>
$( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
  $( this ).text( "مرحبًا!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "اسمي = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
});
$( "button" ).click(function() {
  $( "p" ).trigger( "myCustomEvent" );
});
</script>
 
</body>
</html>

مصادر

صفحة التابع ‎.delegate()‎‎ في توثيق jQuery الرسمي.

@@ سطر 1: / سطر 1: @@
-== ‎.delegate( selector, eventType, handler )‎ ==
+<noinclude>{{DISPLAYTITLE:التابع <code>‎.delegate()‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎</code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery}}</noinclude>
-حذف مع الإصدار: [http://api.jquery.com/category/version/3.0 3.0].
+== <code>‎.delegate( selector, eventType, handler )‎</code> ==
+أُهمِل مع الإصدار: [http://api.jquery.com/category/version/3.0 3.0].
 === القيمة المعادة ===
-يُعيد كائنًا من النوع jQuery.
+يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]].
 === الوصف ===
-يُرفق هذا التابع معالج بأحد الأحداث أو أكثر لكافة العناصر التي تطابق المُحدِد، الآن أو في المستقبل، استنادًا إلى مجموعة محددة من عناصر الجذر.
+يُرفق هذا التابع معالج بأحد الأحداث أو أكثر لكافة العناصر التي تطابق المُحدِد، الآن أو في المستقبل، استنادًا إلى مجموعة محددة من العناصر الجذر.
-=== ‎.delegate( selector, eventType, handler )‎ ===
+=== <code>‎.delegate( selector, eventType, handler )‎</code> ===
 أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4.2 1.4.2].
-==== selector ====
+==== <code>selector</code> ====
-سلسلة نصية تُحدد ترشيح العناصر التي تبدأ الحدث من النوع String.
+سلسلة نصية تُحدد ترشيح العناصر التي تبدأ الحدث من النوع [[JavaScript/String|String]].
-==== eventType ====
+==== <code>eventType</code> ====
-سلسلة نصية تحتوي على واحد أو أكثر من أنواع أحداث JavaScript مفصولة بمسافات، مثل "click" أو "keydown" أو أسماء أحداث مخصصة.
+سلسلة نصية تحتوي على واحد أو أكثر من أنواع أحداث JavaScript مفصولة بمسافات، مثل "<code>click</code>"، أو "<code>keydown,‎</code>"، أو أسماء أحداث مخصصة.
-==== handler ====
+==== <code>handler</code> ====
-دالة حدث Function( Event eventObject )‎ تُنفَّذ في وقت تشغيل الحدث.
+دالة معالجة أحداث تُنفَّذ في وقت تشغيل الحدث، وهي من الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )‎.</code>
-=== ‎.delegate( selector, eventType, eventData, handler )‎ ===
+=== <code>‎.delegate( selector, eventType, eventData, handler )‎</code> ===
 أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4.2 1.4.2].
-==== selector ====
+==== <code>selector</code> ====
-سلسلة نصية تُحدد ترشيح العناصر التي تبدأ الحدث من النوع String.
+سلسلة نصية تُحدد ترشيح العناصر التي تبدأ الحدث من النوع [[JavaScript/String|String]].
-==== eventType ====
+==== <code>eventType</code> ====
-سلسلة نصية تحتوي على واحد أو أكثر من أنواع أحداث JavaScript مفصولة بمسافات، مثل "click" أو "keydown" أو أسماء أحداث مخصصة.
+سلسلة نصية تحتوي على واحد أو أكثر من أنواع أحداث JavaScript مفصولة بمسافات، مثل "<code>click</code>"، أو "<code>keydown,‎</code>"، أو أسماء أحداث مخصصة.
-==== eventData ====
+==== <code>eventData</code> ====
 كائن يحتوي على البيانات التي ستُمرر إلى مداول الحدث، ويمكن أن يكون من أي نوع من أنواع JavaScript.
-==== handler ====
+==== <code>handler</code> ====
-دالة حدث Function( Event eventObject ) تُنفَّذ في وقت تشغيل الحدث.
+دالة معالجة أحداث تُنفَّذ في وقت تشغيل الحدث، وهي من الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )‎.</code>
-=== ‎.delegate( selector, events )‎ ===
+=== <code>‎.delegate( selector, events )‎</code> ===
 أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4.3 1.4.3].
-==== selector ====
+==== <code>selector</code> ====
-سلسلة نصية تُحدد ترشيح العناصر التي تبدأ الحدث من النوع String.
+سلسلة نصية تُحدد ترشيح العناصر التي تبدأ الحدث، وهي من النوع [[JavaScript/String|String]].
-==== events ====
+==== <code>events</code> ====
-كائن بسيط من النوع PlainObject لواحد أو أكثر من أنواع الأحداث والدوال لتنفيذها.
+كائن بسيط من النوع <code>[[JavaScript/Object|Object]]</code> لواحد أو أكثر من أنواع الأحداث والدوال لتنفيذها.
-أُوقف التابع ‎.delegate()‎ اعتبارًا من إصدار jQuery 3.0. وحل محله التابع ‎.on()‎ منذ الإصدار jQuery 1.7، لذلك كان من المحبذ عدم إستعماله. ومع ذلك، بالنسبة للإصدارات السابقة، تظل الوسيلة الأكثر فعالية لاستخدام تفويض الحدث. مزيد من المعلومات حول ربط الحدث والتفويض في صفحة توثيق التابع ‎.on()‎ . بشكل عام، هذه هي القوالب المُكافِئة للتابعَين:
+أهمل التابع ‎.<code>delegate()‎</code> اعتبارًا من إصدار jQuery 3.0. وحل محله التابع ‎<code>[[jQuery/on|.on()]]</code>‎ منذ الإصدار jQuery 1.7، لذلك كان من المحبذ عدم استعماله. ومع ذلك، سيبقى هذا التابع هو الوسيلة الأكثر فعالية لاستخدام تفويض الحدث في الإصدارات السابقة. مزيد من المعلومات حول ربط الحدث والتفويض في صفحة توثيق التابع ‎<code>[[jQuery/on|.on()]]</code>‎. بشكل عام، هذه هي القوالب المُكافِئة للتابعَين:<syntaxhighlight lang="jquery">
+// jQuery 1.4.3+
-على سبيل المثال ، الشيفرة البرمجية التالية للتابع ‎.delegate()‎:
+$( elements ).delegate( selector, events, data, handler );
+// jQuery 1.7+
-تعادل الشيفرة التالية المكتوبة باستخدام التابع ‎.on()‎ :
+$( elements ).on( events, selector, data, handler );
+</syntaxhighlight>على سبيل المثال ، الشيفرة البرمجية التالية للتابع ‎<code>.delegate()‎</code>:<syntaxhighlight lang="jquery">
-لإزالة الأحداث المرفقة مع التابع ‎.delegate()‎، راجع التابع ‎.undelegate()‎‎.
+$( "table" ).delegate( "td", "click", function() {
+  $( this ).toggleClass( "chosen" );
-وهو يُمرر بيانات الأحداث ويعالجها بنفس الطريقة التي يعمل بها التابع ‎.on()‎.
+});
+</syntaxhighlight>تعادل الشيفرة التالية المكتوبة باستخدام التابع ‎<code>[[jQuery/on|.on()]]</code>‎:<syntaxhighlight lang="jquery">
+$( "table" ).on( "click", "td", function() {
+  $( this ).toggleClass( "chosen" );
+});
+</syntaxhighlight>لإزالة الأحداث المرفقة مع التابع ‎<code>.delegate()</code>‎، راجع التابع <code>[[jQuery/undelegate|‎.undelegate()‎‎]]</code>، وهو يُمرر بيانات الأحداث ويعالجها بنفس الطريقة التي يعمل بها التابع ‎<code>[[jQuery/on|.on()]]</code>‎.
 === ملاحظات إضافية ===
-نظرًا لأن التابع ‎.live()‎ يعالج الأحداث بمجرد نشرها إلى أعلى المستند، لا يمكن إيقاف نشر أحداث live. وبالمثل، فإن الأحداث التي يعالجها التابع ‎.delegate()‎ سوف تنتشر إلى العناصر المفوَّضَة؛ ستُنفَّذ بالفعل معالجات الأحداث المرتبطة بأي عناصر تحتها في شجرة DOM في الوقت الذي يُستدعى فيه معالج الحدث المفوَّض. لذلك، قد تمنع هذه المعالجات المعالجَ المفوَّض من التشغيل عن طريق استدعاء event.stopPropagation()‎ أو إعادة false.
+نظرًا لأن التابع <code>[[jQuery/live|‎.live()‎]]</code> يعالج الأحداث بمجرد انتشارها (propagate) إلى أعلى المستند، فلا يمكن إيقاف انتشار أحداث <code>live.</code> وبالمثل، فإن الأحداث التي يعالجها التابع ‎<code>.delegate()</code>‎ سوف تنتشر إلى العناصر المفوَّضَة؛ وستُنفَّذ  معالجات الأحداث المرتبطة بأي عناصر تحتها في شجرة DOM في الوقت الذي يُستدعى فيه معالج الحدث المفوَّض. لذلك، قد تمنع هذه المعالجات المعالجَ المفوَّض من التشغيل عن طريق استدعاء <code>[[jQuery/event/stopPropagation|event.stopPropagation()]]</code>‎ أو إعادة <code>false</code>.
 === أمثلة ===
-انقر فقرة لإضافة أخرى. لاحظ أن ‎.delegate()‎‎ يُرفِق معالج حدث click مع كافة الفقرات، حتى الجديدة.
+انقر على فقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code> لإضافة أخرى. لاحظ أن ‎<code>.delegate()‎‎</code> يُرفِق معالج للحدث click مع كافة الفقرات، حتى تلك التي لم تضف بعد:<syntaxhighlight lang="html">
+<!doctype html>
-لعرض نص كل فقرة في مربع تنبيه عند النقر عليه:
+<html lang="en">
+<head>
-لإلغاء إجراء افتراضي ومنعه من التزايد، يعيد خطأ:
+  <meta charset="utf-8">
+  <title>delegate مثال على التابع</title>
-لإلغاء الإجراء الافتراضي فقط باستخدام التابع preventDefault.
+  <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>أنقر هما!</p>
+<span></span>
+<script>
+$( "body" ).delegate( "p", "click", function() {
+  $( this ).after( "<p>فقرة أخرى!</p>" );
+});
+</script>
+</body>
+</html>
+</syntaxhighlight>لعرض نص كل فقرة في مربع تنبيه عند النقر عليه:<syntaxhighlight lang="jquery">
+$( "body" ).delegate( "p", "click", function() {
+  alert( $( this ).text() );
+});
+</syntaxhighlight>لإلغاء إجراء افتراضي ومنعه من الانتشار إلى الأعلى (النمط bubble)، فأعد القيمة false من الدالة:<syntaxhighlight lang="jquery">
+$( "body" ).delegate( "a", "click", function() {
+  return false;
+});
+</syntaxhighlight>أما لإلغاء الإجراء الافتراضي باستخدام التابع <code>preventDefault</code> فقط:<syntaxhighlight lang="jquery">
+$( "body" ).delegate( "a", "click", function( event ) {
+  event.preventDefault();
+});
+</syntaxhighlight>يمكن ربط الأحداث المخصصة (custom events) أيضًا:<syntaxhighlight lang="html">
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>delegate مثال على التابع</title>
+  <style>
+  p {
+    color: red;
+  }
+  span {
+    color: blue;
+  }
+  </style>
+  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
+</head>
+<body>
+<p>مرفق معه حدث مخصص.</p>
+<button>إطلاق حدث مخصص</button>
+<span style="display:none;"></span>
+<script>
+$( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
+  $( this ).text( "مرحبًا!" );
+  $( "span" )
+    .stop()
+    .css( "opacity", 1 )
+    .text( "اسمي = " + myName )
+    .fadeIn( 30 )
+    .fadeOut( 1000 );
+});
+$( "button" ).click(function() {
+  $( "p" ).trigger( "myCustomEvent" );
+});
+</script>
+</body>
+</html>
+</syntaxhighlight>
 == مصادر ==
 * [http://api.jquery.com/delegate/ صفحة التابع ‎.delegate()‎‎ في توثيق jQuery الرسمي].
+[[تصنيف:jQuery]]
+[[تصنيف:jQuery Method]]
+[[تصنيف:jQuery Events ]]
+[[تصنيف:jQuery Deprecated]]