التابع .trigger() في jQuery
.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"
});