الفرق بين المراجعتين ل"jQuery/delegate"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'== ‎.delegate( selector, eventType, handler )‎ == حذف مع الإصدار: [http://api.jquery.com/category/version/3.0 3.0]. === القيمة المعادة ===...')
 
 
(6 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 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].
 
أُضيف مع الإصدار: [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].
 
أُضيف مع الإصدار: [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.
 
كائن يحتوي على البيانات التي ستُمرر إلى مداول الحدث، ويمكن أن يكون من أي نوع من أنواع 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].
 
أُضيف مع الإصدار: [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 الرسمي].
+
* [http://api.jquery.com/delegate/ صفحة التابع ‎.delegate()‎‎ في توثيق jQuery الرسمي].
 +
[[تصنيف:jQuery]]
 +
[[تصنيف:jQuery Method]]
 +
[[تصنيف:jQuery Events ]]
 +
[[تصنيف:jQuery Deprecated]]

المراجعة الحالية بتاريخ 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>

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=jQuery/delegate&oldid=10073"