الفرق بين المراجعتين ل"jQuery/trigger"
Khaled-yassin (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>.trigger()</code> في jQuery}}</noinclu...') |
|||
| سطر 12: | سطر 12: | ||
==== <code>eventType</code> ==== | ==== <code>eventType</code> ==== | ||
| − | سلسلة من النوع [[JavaScript/String/match|String]] تحتوي على نوع حدث JavaScript، مثل <code>click</code> أو <code>submit</code> . | + | سلسلة نصية من النوع [[JavaScript/String/match|<code>String</code>]] تحتوي على نوع حدث JavaScript، مثل <code>click</code> أو <code>submit</code> . |
==== <code>extraParameters</code> ==== | ==== <code>extraParameters</code> ==== | ||
| − | معاملات إضافية لتمريرها إلى معالج الحدث وهي تكون من النوع [[JavaScript/Array|Array]] أو [[JavaScript/Object|PlainObject]]. | + | معاملات إضافية لتمريرها إلى معالج الحدث وهي تكون من النوع [[JavaScript/Array|<code>Array</code>]] أو [[JavaScript/Object|<code>PlainObject</code>]]. |
=== <code>.trigger( event [, extraParameters ] )</code> === | === <code>.trigger( event [, extraParameters ] )</code> === | ||
| سطر 21: | سطر 21: | ||
==== <code>event</code> ==== | ==== <code>event</code> ==== | ||
| − | كائن jQuery.Event من النوع [[jQuery/event/|Event]]. | + | كائن <code>jQuery.Event</code> من النوع [[jQuery/event/|<code>Event</code>]]. |
==== <code>extraParameters</code> ==== | ==== <code>extraParameters</code> ==== | ||
| − | معاملات إضافية لتمريرها إلى معالج الحدث وهي تكون من النوع [[JavaScript/Array|Array]] أو [[JavaScript/Object|PlainObject]]. | + | معاملات إضافية لتمريرها إلى معالج الحدث وهي تكون من النوع [[JavaScript/Array|<code>Array</code>]] أو [[JavaScript/Object|<code>PlainObject</code>]]. |
تُنفَّذ أي معالجات أحداث مرتبطة بالتابع <code>[[jQuery/on|.on()]]</code> أو أحد توابع الاختصار الخاصة بها عند حدوث الحدث المقابل. ويمكن مع ذلك أن تنطلق يدويًا باستخدام التابع <code>.trigger()</code>. يؤدي استدعاء التابع <code>.trigger()</code> تنفيذ المعالجات بنفس ترتيبها الذي يجب أن تنفذ به إذا أنطلق الحدث بشكل طبيعي بواسطة المستخدم:<syntaxhighlight lang="jquery"> | تُنفَّذ أي معالجات أحداث مرتبطة بالتابع <code>[[jQuery/on|.on()]]</code> أو أحد توابع الاختصار الخاصة بها عند حدوث الحدث المقابل. ويمكن مع ذلك أن تنطلق يدويًا باستخدام التابع <code>.trigger()</code>. يؤدي استدعاء التابع <code>.trigger()</code> تنفيذ المعالجات بنفس ترتيبها الذي يجب أن تنفذ به إذا أنطلق الحدث بشكل طبيعي بواسطة المستخدم:<syntaxhighlight lang="jquery"> | ||
| سطر 31: | سطر 31: | ||
}); | }); | ||
$( "#foo" ).trigger( "click" ); | $( "#foo" ).trigger( "click" ); | ||
| − | </syntaxhighlight>بدءًا من الإصدار jQuery [http://api.jquery.com/category/version/1.3 1.3]، تنتقل الأحداث المنطلقة بواسطة التابع <code>.trigger()</code> عبر شجرة DOM إلى العناصر الأب؛ يمكن أن يوقف معالج الحدث الإنتقال عن طريق إعادة القيمة <code>false</code> من المعالج أو استدعاء التابع <code>[[jQuery/stopPropagation|.stopPropagation()]]</code> على كائن الحدث المُمرر إلى الحدث. على الرغم من أن <code>.trigger()</code> يحاكي تنشيط الحدث، مكتملًا بكائن حدث مركب، فإنه لا يضاهي تمامًا حدثًا طبيعيًا. | + | </syntaxhighlight>بدءًا من الإصدار jQuery [http://api.jquery.com/category/version/1.3 1.3]، تنتقل الأحداث المنطلقة بواسطة التابع <code>.trigger()</code> عبر شجرة DOM إلى العناصر الأب؛ يمكن أن يوقف معالج الحدث الإنتقال عن طريق إعادة القيمة <code>false</code> من المعالج أو استدعاء التابع <code>[[jQuery/event/stopPropagation|.stopPropagation()]]</code> على كائن الحدث المُمرر إلى الحدث. على الرغم من أن <code>.trigger()</code> يحاكي تنشيط الحدث، مكتملًا بكائن حدث مركب، فإنه لا يضاهي تمامًا حدثًا طبيعيًا. |
لتشغيل معالجات مرتبطة بواسطة jQuery دون تشغيل الحدث الأصلي أيضًا، نستخدم التابع <code>[[jQuery/triggerHandler|.triggerHandler()]]</code> بدلاً من ذلك. | لتشغيل معالجات مرتبطة بواسطة jQuery دون تشغيل الحدث الأصلي أيضًا، نستخدم التابع <code>[[jQuery/triggerHandler|.triggerHandler()]]</code> بدلاً من ذلك. | ||
| سطر 40: | سطر 40: | ||
}); | }); | ||
$( "#foo").trigger( "custom", [ "Custom", "Event" ] ); | $( "#foo").trigger( "custom", [ "Custom", "Event" ] ); | ||
| − | </syntaxhighlight>يُمرر كائن الحدث دومًا كأول معامل إلى معالج الأحداث. يمكن أيضاً تمرير مصفوفة من الوسائط أثناء استدعاء .trigger()، وستُمرر هذه المعاملات إلى المعالج نبعًا إلى كائن الحدث. بدءًا من jQuery [http://api.jquery.com/category/version/1.6.2 1.6.2]، يمكن تمرير وسيطًا منفردًا سواء نصيًا أو رقميًا دون وضعه في مصفوفة. | + | </syntaxhighlight>يُمرر كائن الحدث دومًا كأول معامل إلى معالج الأحداث. يمكن أيضاً تمرير مصفوفة من الوسائط أثناء استدعاء <code>.trigger()</code>، وستُمرر هذه المعاملات إلى المعالج نبعًا إلى كائن الحدث. بدءًا من jQuery [http://api.jquery.com/category/version/1.6.2 1.6.2]، يمكن تمرير وسيطًا منفردًا سواء نصيًا أو رقميًا دون وضعه في مصفوفة. |
| − | لاحظ الفرق بين المعاملات الإضافية التي مُررت هنا والمعامل <code>eventData</code> المُمرر إلى التابع <code>[[jQuery/on|.on()]]</code>. كلاهما آليات لنقل المعلومات إلى معالج الأحداث، ولكن تمرير المعامل <code>extraParameters</code> إلى التابع | + | لاحظ الفرق بين المعاملات الإضافية التي مُررت هنا والمعامل <code>eventData</code> المُمرر إلى التابع <code>[[jQuery/on|.on()]]</code>. كلاهما آليات لنقل المعلومات إلى معالج الأحداث، ولكن تمرير المعامل <code>extraParameters</code> إلى التابع <code>.trigger()</code> يسمح بتحديد المعلومات في وقت تشغيل الحدث، بينما تمرير الوسيط <code>eventData</code> إلى التابع <code>[[jQuery/on|.on()]]</code> يحتاج إلى أن تكون المعلومات قد حُسِبت بالفعل في الوقت الذي يرتبط فيه المعالج. |
يمكن استخدام التابع <code>.trigger()</code> على مجموعات jQuery التي تحتوي على كائنات JavaScript بسيطة بطريقة تشبه آلية pub/sub؛ تُستدعى أي معالجات أحداث مرتبطة بالكائن عند تشغيل الحدث. | يمكن استخدام التابع <code>.trigger()</code> على مجموعات jQuery التي تحتوي على كائنات JavaScript بسيطة بطريقة تشبه آلية pub/sub؛ تُستدعى أي معالجات أحداث مرتبطة بالكائن عند تشغيل الحدث. | ||
| − | ملاحظة: بالنسبة لكل من الكائنات العادية وكائنات DOM ما عدا الكائن <code>window</code>، إذا تطابق اسم الحدث المنطلِق مع اسم خاصية ما في الكائن، فسيحاول jQuery استدعاء الخاصية كتابع إذا لم يستدعي معالج الأحداث [[jQuery/event/preventDefault|event.preventDefault()]] . إذا لم يكن هذا السلوك مطلوبًا، استخدم <code>[[jQuery/triggerHandler|.triggerHandler()]]</code> بدلاً من ذلك. | + | ملاحظة: بالنسبة لكل من الكائنات العادية وكائنات DOM ما عدا الكائن <code>window</code>، إذا تطابق اسم الحدث المنطلِق مع اسم خاصية ما في الكائن، فسيحاول jQuery استدعاء الخاصية كتابع إذا لم يستدعي معالج الأحداث [[jQuery/event/preventDefault|<code>event.preventDefault()</code>]] . إذا لم يكن هذا السلوك مطلوبًا، استخدم <code>[[jQuery/triggerHandler|.triggerHandler()]]</code> بدلاً من ذلك. |
| − | ملاحظة: كما هو الحال مع <code>[[jQuery/triggerHandler|.triggerHandler()]]</code>، عند استدعاء <code>.trigger()</code> مع اسم حدث يتطابق مع اسم خاصية في الكائن، مسبوقًا بالسابقة ( <code>on</code> على سبيل المثال تشغيل <code>click</code> on <code>window</code> التي لها تابع <code>onclick</code> غير فارغ)، سيحاول jQuery استدعاء تلك الخاصية كتابع. | + | ملاحظة: كما هو الحال مع <code>[[jQuery/triggerHandler|.triggerHandler()]]</code>، عند استدعاء <code>.trigger()</code> مع اسم حدث يتطابق مع اسم خاصية في الكائن، مسبوقًا بالسابقة (<code>on</code> على سبيل المثال تشغيل <code>click</code> on <code>window</code> التي لها تابع <code>onclick</code> غير فارغ)، سيحاول jQuery استدعاء تلك الخاصية كتابع. |
ملاحظة: عند التشغيل باستخدام كائن بسيط لا يشبه مصفوفة ولكن لا يزال يحتوي على خاصية <code>length</code>، يجب أن يُمرر الكائن داخل مصفوفة (على سبيل المثال [ <code>{ length: 1 }</code> ] . | ملاحظة: عند التشغيل باستخدام كائن بسيط لا يشبه مصفوفة ولكن لا يزال يحتوي على خاصية <code>length</code>، يجب أن يُمرر الكائن داخل مصفوفة (على سبيل المثال [ <code>{ length: 1 }</code> ] . | ||
=== أمثلة === | === أمثلة === | ||
| − | تؤدي النقرات على الزر #2 إلى النقر على الزر #1 أيضًا | + | تؤدي النقرات على الزر #2 إلى النقر على الزر #1 أيضًا:<syntaxhighlight lang="html"> |
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 98: | سطر 98: | ||
</body> | </body> | ||
</html> | </html> | ||
| − | </syntaxhighlight>لتقديم النموذج الأول دون استخدام الدالة submit():<syntaxhighlight lang="jquery"> | + | </syntaxhighlight>لتقديم النموذج الأول دون استخدام الدالة <code>[[jQuery/submit|submit()]]</code>:<syntaxhighlight lang="jquery"> |
$( "form:first" ).trigger( "submit" ); | $( "form:first" ).trigger( "submit" ); | ||
| − | </syntaxhighlight>لتقديم النموذج الأول دون استخدام الدالة submit():<syntaxhighlight lang="jquery"> | + | </syntaxhighlight>لتقديم النموذج الأول دون استخدام الدالة <code>[[jQuery/submit|submit()]]</code>:<syntaxhighlight lang="jquery"> |
var event = jQuery.Event( "submit" ); | var event = jQuery.Event( "submit" ); | ||
$( "form:first" ).trigger( event ); | $( "form:first" ).trigger( event ); | ||
| سطر 127: | سطر 127: | ||
== مصادر == | == مصادر == | ||
| − | |||
* [http://api.jquery.com/trigger/ صفحة التابع .trigger()في توثيق jQuery الرسمي]. | * [http://api.jquery.com/trigger/ صفحة التابع .trigger()في توثيق jQuery الرسمي]. | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Method]] | [[تصنيف:jQuery Method]] | ||
[[تصنيف:jQuery Events]] | [[تصنيف:jQuery Events]] | ||
المراجعة الحالية بتاريخ 10:28، 23 يونيو 2018
.trigger( eventType [, extraParameters ] )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
تنفيذ جميع المعالجات والسلوكيات المرفقة بالعناصر المطابقة لنوع الحدث المُدخَل.
.trigger( eventType [, extraParameters ] )
أُضيف مع الإصدار: 1.0.
eventType
سلسلة نصية من النوع String تحتوي على نوع حدث JavaScript، مثل click أو submit .
extraParameters
معاملات إضافية لتمريرها إلى معالج الحدث وهي تكون من النوع Array أو PlainObject.
.trigger( event [, extraParameters ] )
أُضيف مع الإصدار: 1.3.
event
كائن jQuery.Event من النوع Event.
extraParameters
معاملات إضافية لتمريرها إلى معالج الحدث وهي تكون من النوع Array أو PlainObject.
تُنفَّذ أي معالجات أحداث مرتبطة بالتابع .on() أو أحد توابع الاختصار الخاصة بها عند حدوث الحدث المقابل. ويمكن مع ذلك أن تنطلق يدويًا باستخدام التابع .trigger(). يؤدي استدعاء التابع .trigger() تنفيذ المعالجات بنفس ترتيبها الذي يجب أن تنفذ به إذا أنطلق الحدث بشكل طبيعي بواسطة المستخدم:
$( "#foo" ).on( "click", function() {
alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );
بدءًا من الإصدار jQuery 1.3، تنتقل الأحداث المنطلقة بواسطة التابع .trigger() عبر شجرة DOM إلى العناصر الأب؛ يمكن أن يوقف معالج الحدث الإنتقال عن طريق إعادة القيمة false من المعالج أو استدعاء التابع .stopPropagation() على كائن الحدث المُمرر إلى الحدث. على الرغم من أن .trigger() يحاكي تنشيط الحدث، مكتملًا بكائن حدث مركب، فإنه لا يضاهي تمامًا حدثًا طبيعيًا.
لتشغيل معالجات مرتبطة بواسطة jQuery دون تشغيل الحدث الأصلي أيضًا، نستخدم التابع .triggerHandler() بدلاً من ذلك.
عندما نحدد نوع حدث مخصص باستخدام التابع .on()، يمكن أن يصبح الوسيط الثاني للتابع .trigger() مفيدًا. على سبيل المثال، لنفترض أننا ربطنا معالجًا لحدث مُخصص custom بعنصرٍ بدلاً من حدث click الأصلي كما فعلنا أعلاه:
$( "#foo" ).on( "custom", function( event, param1, param2 ) {
alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );
يُمرر كائن الحدث دومًا كأول معامل إلى معالج الأحداث. يمكن أيضاً تمرير مصفوفة من الوسائط أثناء استدعاء .trigger()، وستُمرر هذه المعاملات إلى المعالج نبعًا إلى كائن الحدث. بدءًا من jQuery 1.6.2، يمكن تمرير وسيطًا منفردًا سواء نصيًا أو رقميًا دون وضعه في مصفوفة.
لاحظ الفرق بين المعاملات الإضافية التي مُررت هنا والمعامل eventData المُمرر إلى التابع .on(). كلاهما آليات لنقل المعلومات إلى معالج الأحداث، ولكن تمرير المعامل extraParameters إلى التابع .trigger() يسمح بتحديد المعلومات في وقت تشغيل الحدث، بينما تمرير الوسيط eventData إلى التابع .on() يحتاج إلى أن تكون المعلومات قد حُسِبت بالفعل في الوقت الذي يرتبط فيه المعالج.
يمكن استخدام التابع .trigger() على مجموعات jQuery التي تحتوي على كائنات JavaScript بسيطة بطريقة تشبه آلية pub/sub؛ تُستدعى أي معالجات أحداث مرتبطة بالكائن عند تشغيل الحدث.
ملاحظة: بالنسبة لكل من الكائنات العادية وكائنات DOM ما عدا الكائن window، إذا تطابق اسم الحدث المنطلِق مع اسم خاصية ما في الكائن، فسيحاول jQuery استدعاء الخاصية كتابع إذا لم يستدعي معالج الأحداث event.preventDefault() . إذا لم يكن هذا السلوك مطلوبًا، استخدم .triggerHandler() بدلاً من ذلك.
ملاحظة: كما هو الحال مع .triggerHandler()، عند استدعاء .trigger() مع اسم حدث يتطابق مع اسم خاصية في الكائن، مسبوقًا بالسابقة (on على سبيل المثال تشغيل click on window التي لها تابع onclick غير فارغ)، سيحاول jQuery استدعاء تلك الخاصية كتابع.
ملاحظة: عند التشغيل باستخدام كائن بسيط لا يشبه مصفوفة ولكن لا يزال يحتوي على خاصية length، يجب أن يُمرر الكائن داخل مصفوفة (على سبيل المثال [ { length: 1 } ] .
أمثلة
تؤدي النقرات على الزر #2 إلى النقر على الزر #1 أيضًا:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>trigger مثال على التابع</title>
<style>
button {
margin: 10px;
}
div {
color: blue;
font-weight: bold;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>الزر #1</button>
<button>الزر #2</button>
<div><span>0</span> نقرات على الزر #1.</div>
<div><span>0</span> نقرات على الزر #2.</div>
<script>
$( "button:first" ).click(function() {
update( $( "span:first" ) );
});
$( "button:last" ).click(function() {
$( "button:first" ).trigger( "click" );
update( $( "span:last" ) );
});
function update( j ) {
var n = parseInt( j.text(), 10 );
j.text( n + 1 );
}
</script>
</body>
</html>
لتقديم النموذج الأول دون استخدام الدالة submit():
$( "form:first" ).trigger( "submit" );
لتقديم النموذج الأول دون استخدام الدالة submit():
var event = jQuery.Event( "submit" );
$( "form:first" ).trigger( event );
if ( event.isDefaultPrevented() ) {
// تنفيذ إجراء...
}
لتمرير بيانات عشوائية لأحد الأحداث:
$( "p" )
.click(function( event, a, b ) {
// عند إطلاق إحدى النقرات العادية يصبح a و b غير معرفين
// لمشغل مثل التالي، يشير a إلى "foo" ويشير b إلى "bar"
})
.trigger( "click", [ "foo", "bar" ] );
لتمرير بيانات عشوائية من خلال كائن الحدث:
var event = jQuery.Event( "logged" );
event.user = "foo";
event.pass = "bar";
$( "body" ).trigger( event );
طريقة بديلة لتمرير البيانات من خلال كائن الحدث:
$( "body" ).trigger({
type:"logged",
user:"foo",
pass:"bar"
});