إنشاء الأحداث المخصّصة وإطلاقها
صمّم الأحداث المخصّصة وطبّقها باستخدام .trigger() و.on() لفصل المكوّنات وإنشاء شيفرة أنظف وتمكين الاتصال المرن بين أجزاء تطبيقك المختلفة.
إنشاء الأحداث المخصّصة وإطلاقها درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.
مقدمة إلى الأحداث المخصّصة
مرحبًا! في هذا الدرس، ستتعلّمون كيفية إنشاء الأحداث المخصّصة الخاصة بكم وإدارتها في jQuery. وهذه طريقة قوية لجعل شيفرتكم أكثر تنظيمًا ومرونة.
فكّروا في الأحداث المخصّصة على أنها رسائل خاصة يمكن لأجزاء مختلفة من تطبيق الويب الخاص بكم إرسالها واستقبالها. ويساعد ذلك هذه الأجزاء على التواصل من دون ارتباط مباشر بينها.
لماذا نستخدم الأحداث المخصّصة؟
لماذا نستخدم الأحداث المخصّصة؟ لأنها تساعد على حل مشكلة شائعة، وهي الاقتران الوثيق. فعندما تكون المكوّنات مقترنة اقترانًا وثيقًا، قد يؤدي تغيير جزء من الشيفرة إلى تعطيل جزء آخر.
- فك الاقتران: لا تحتاج المكوّنات إلى معرفة آلية العمل الداخلية لبعضها.
- شيفرة أنظف: تُركّز المنطق المرتبط بإجراء معين في مكان واحد.
- المرونة: يمكنكم إضافة المستمعات أو إزالتها بسهولة من دون تعديل «المرسِل».
الطريقة .trigger()
لـ«إرسال» حدث مخصّص أو «تشغيله»، نستخدم طريقة jQuery المسماة .trigger(). وتُستدعى هذه الطريقة على كائن jQuery، أي عنصر أو document، مع تمرير اسم الحدث كسلسلة نصية.
يمكن أن يكون اسم الحدث أي اسم تختارونه، مثل 'dataLoaded' أو 'itemAdded'.
عرض توضيحي لتشغيل حدث
لنرَ طريقة .trigger() قيد التنفيذ. سنشغّل حدثًا مخصّصًا باسم 'myCustomEvent' على زر عند النقر عليه. لن يحدث شيء بعد، لأنه لا يوجد مستمع لهذا الحدث!
<!-- HTML assumed to be present -->
<button id="triggerButton">Trigger Event</button>
<script>
$(document).ready(function() {
$('#triggerButton').on('click', function() {
// Fire our custom event on the button itself
$(this).trigger('myCustomEvent');
console.log('myCustomEvent triggered!');
});
});
</script>الاستماع باستخدام .on()
لاستقبال حدث مخصّص أو «الاستماع» إليه، نستخدم الطريقة المألوفة .on(). وكما هو الحال مع الأحداث المضمّنة، مثل 'click'، تحددون اسم الحدث ودالة تُشغّل عند وقوعه.
يمكنكم الاستماع على العنصر نفسه الذي شغّل الحدث، أو على عنصر أب، أو حتى على document نفسه للاستماع إلى الأحداث العامة.
مثال على التشغيل والاستماع
لنستخدم الآن .trigger() و.on() معًا. انقروا على الزر، وستظهر الرسالة، موضحةً أن حدثنا المخصّص شُغّل واستُقبل بنجاح!
<!-- HTML assumed to be present -->
<button id="myButton">Click Me</button>
<p id="statusMessage">Status: Waiting...</p>
<script>
$(document).ready(function() {
// 1. Listen for 'buttonClicked' on the button
$('#myButton').on('buttonClicked', function() {
$('#statusMessage').text('Status: Custom event received!');
});
// 2. When the button is clicked, trigger 'buttonClicked'
$('#myButton').on('click', function() {
$(this).trigger('buttonClicked');
});
});
</script>تمرير البيانات مع الأحداث
تصبح الأحداث المخصّصة أكثر فائدة عندما تتمكنون من تمرير البيانات معها. يمكنكم إرسال وسيطات إضافية إلى .trigger() بعد اسم الحدث، وستُمرَّر هذه الوسيطات إلى دالة معالج الحدث.
- يكون الوسيط الأول في المعالج دائمًا كائن الحدث.
- أما الوسيطات التالية فتكون البيانات التي مرّرتموها مع
.trigger().
عرض توضيحي لبيانات حدث مخصّص
نشغّل هنا حدثًا باسم 'dataReady' ونمرّر سلسلة نصية وكائنًا. يستقبل المستمع هذه البيانات ويعرضها. هكذا تتشارك المكوّنات المعلومات!
<!-- HTML assumed to be present -->
<button id="loadData">Load Data</button>
<p id="output"></p>
<script>
$(document).ready(function() {
// Listen for 'dataReady' and extract the passed data
$(document).on('dataReady', function(event, message, details) {
const outputText = `Message: ${message}<br>Details: ${details.status} for ${details.item}`;
$('#output').html(outputText);
});
// When button clicked, trigger 'dataReady' with data
$('#loadData').on('click', function() {
const msg = 'Data successfully loaded!';
const data = { status: 'complete', item: 'report' };
$(document).trigger('dataReady', [msg, data]);
console.log('Data event triggered!');
});
});
</script>فك الاقتران لتطبيقات أفضل
يساعد استخدام الأحداث المخصّصة للتواصل على بناء تطبيقات أكثر نمطية وأسهل في الصيانة. تخيّلوا مكوّن «سلة تسوق» ومكوّن «عرض المنتجات».
- عند إضافة منتج، يشغّل «عرض المنتجات» الحدث
'productAdded'. - يستمع مكوّن «سلة التسوق» إلى
'productAdded'ويحدّث نفسه.
لا يحتاج أي من المكوّنين إلى معرفة الطرق الداخلية للمكوّن الآخر، بل يحتاجان فقط إلى معرفة عقد الحدث.
تحقّقوا من فهمكم
أيّ العبارات التالية تصف بشكل صحيح فوائد الأحداث المخصّصة أو طريقة استخدامها مع .trigger() و.on()؟
مراجعة: الأحداث المخصّصة
أحسنتم! لقد تعلّمتم كيفية إنشاء الأحداث المخصّصة في jQuery وإدارتها. إليكم ملخصًا سريعًا:
- ما هي؟ الأحداث المخصّصة رسائل يعرّفها المستخدم لمكوّنات التطبيق.
- لماذا؟ تعزّز فك الاقتران، مما يؤدي إلى شيفرة أنظف وأكثر مرونة.
- كيف؟ استخدموا
.trigger('eventName', [data])لتشغيل حدث. - كيف؟ استخدموا
.on('eventName', function(event, data) { ... })للاستماع إلى حدث.
يُعد إتقان الأحداث المخصّصة خطوة أساسية نحو بناء تطبيقات jQuery قوية وقابلة للتوسّع!
تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 22
- الدروس
- 48
الأسئلة الشائعة
هل درس «إنشاء الأحداث المخصّصة وإطلاقها» مجاني؟
نعم — نص درس «إنشاء الأحداث المخصّصة وإطلاقها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.
ماذا ستتعلم في «إنشاء الأحداث المخصّصة وإطلاقها»؟
صمّم الأحداث المخصّصة وطبّقها باستخدام .trigger() و.on() لفصل المكوّنات وإنشاء شيفرة أنظف وتمكين الاتصال المرن بين أجزاء تطبيقك المختلفة. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟
لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.
كم من الوقت يستغرق درس «إنشاء الأحداث المخصّصة وإطلاقها»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟
نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تطبيق تفويض الأحداث المتين
- إيقاف انتشار الأحداث
- إنشاء الأحداث المخصّصة وإطلاقها