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