jQuery 3.3

.trigger()




jquery

.trigger (eventType [، extraParameters]) الإرجاع: jQuery

الوصف: تنفيذ جميع معالجات وسلوكيات المرفقة بالعناصر المتطابقة لنوع الحدث المحدد.

يتم تشغيل أي معالجات أحداث مرتبطة بـ .on() أو أحد أساليب الاختصار الخاصة بها عند حدوث الحدث المطابق. يمكن أن يتم .trigger() يدويًا ، ومع ذلك ، باستخدام طريقة .trigger() . تؤدي مكالمة إلى .trigger() تنفيذ معالجات بنفس ترتيبها إذا تم تشغيل الحدث بشكل طبيعي بواسطة المستخدم:

$( "#foo" ).on( "click", function() {
  alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );

اعتبارًا من jQuery 1.3 ، تقوم .trigger() ed .trigger() فقاعات في شجرة DOM. يمكن أن يوقف معالج الحدث الفقاعات عن طريق إرجاع false من المعالج أو استدعاء الأسلوب .stopPropagation() على كائن الحدث الذي تم تمريره إلى الحدث. على الرغم من أن .trigger() يحاكي تنشيط الحدث ، مكتملًا .trigger() حدث مركب ، فإنه لا ينسخ تمامًا حدثًا طبيعيًا.

لتشغيل معالجات مرتبطة عبر jQuery دون تشغيل الحدث الأصلي أيضًا ، استخدم .triggerHandler() بدلاً من ذلك.

عندما نحدد نوع حدث مخصص باستخدام الأسلوب .trigger() يمكن أن تصبح الوسيطة الثانية إلى .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() إلى .on() أن يتم حساب المعلومات بالفعل في الوقت الذي يرتبط فيه المعالج.

يمكن استخدام طريقة .trigger() على مجموعات jQuery التي تلتف على كائنات JavaScript بسيطة تشبه آلية الحانة / الفرعية ؛ سيتم استدعاء أي معالجات أحداث مرتبطة بالكائن عند تشغيل الحدث.

ملاحظة: بالنسبة لكل من الكائنات العادية وكائنات DOM غير window ، إذا تطابق اسم الحدث الذي تم تشغيله مع اسم خاصية ما على الكائن ، فسيقوم jQuery بمحاولة استدعاء الخاصية كطريقة إذا لم يستدعي معالج الأحداث event.preventDefault() . إذا لم يكن هذا السلوك المطلوب ، استخدم .triggerHandler() بدلاً من ذلك.
ملاحظة: كما هو الحال مع .triggerHandler() ، عند استدعاء .trigger() مع اسم حدث يتطابق مع اسم خاصية على الكائن ، مسبوقًا عليه ( on سبيل المثال تشغيل click window التي لها طريقة onclick غير فارغة) ، سيحاول jQuery لاستدعاء تلك الخاصية كطريقة.
ملاحظة: عند التشغيل باستخدام كائن بسيط لا يشبه صفيفًا ولكن لا يزال يحتوي على خاصية length ، يجب أن تمر الكائن في مصفوفة (على سبيل المثال [ { length: 1 } ] .

أمثلة:

تؤدي النقرات إلى الزر # 2 أيضًا إلى النقر على الزر # 1.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>trigger demo</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>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</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() ) {
  // Perform an action...
}

لتمرير بيانات عشوائية لأحد الأحداث:

$( "p" )
  .click(function( event, a, b ) {
    // When a normal click fires, a and b are undefined
    // for a trigger like below a refers to "foo" and b refers to "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"
});