العمل مع الـ Events في JavaScript

بواسطة /

الدرس السادس والعشرون: العمل مع الـ Events في JavaScript

الـ Events هي أساس التفاعل في JavaScript، حيث تسمح بالتعامل مع التفاعلات التي تحدث على عناصر الصفحة مثل الضغط على الأزرار، تحريك الفأرة، تحميل الصفحة، وغيرها. في هذا الدرس، سنتناول كيفية التعامل مع Event Bubbling و Event Capturing، كيفية التعامل مع الأحداث المخصصة، واستخدام addEventListener و removeEventListener لإدارة الأحداث.

1. Event Bubbling و Event Capturing

عند وقوع حدث على عنصر ما في الـ DOM (مثل الضغط على زر)، يمكن أن “ينتشر” الحدث عبر عناصر الصفحة بطريقة معينة. يُطلق على هذه العمليات Event Bubbling و Event Capturing.

Event Bubbling:

في Event Bubbling، يبدأ الحدث من العنصر الذي وقع عليه أولاً (أو العنصر الهدف)، ثم “يتسرب” أو “يتصاعد” للأعلى عبر العناصر الأصلية (الأب، الجد، وما إلى ذلك) في الـ DOM. تُعد Event Bubbling الطريقة الافتراضية التي يحدث بها التعامل مع الأحداث في JavaScript.

مثال على Event Bubbling:

<!DOCTYPE html>
<html>
<body>
  <div id="parent" style="padding: 20px; background-color: lightblue;">
    <button id="child">اضغط هنا</button>
  </div>

  <script>
    const parent = document.getElementById("parent");
    const child = document.getElementById("child");

    parent.addEventListener("click", () => {
      alert("تم الضغط على العنصر الأب");
    });

    child.addEventListener("click", () => {
      alert("تم الضغط على الزر");
    });
  </script>
</body>
</html>

في هذا المثال:

  • عند الضغط على الزر، سيظهر التنبيه “تم الضغط على الزر”، ثم سيستمر الحدث في الصعود إلى العنصر الأب وسيظهر التنبيه “تم الضغط على العنصر الأب” بسبب Event Bubbling.

Event Capturing:

في Event Capturing، يبدأ الحدث من العنصر الجذر (أعلى الـ DOM) ويتجه نحو العنصر الهدف (الذي تم تنفيذ الحدث عليه). يعتبر Event Capturing غير الافتراضي ويجب تفعيله بشكل صريح عند إضافة الـ event listener.

لتفعيل Event Capturing، نقوم بتمرير true كمعامل ثالث إلى addEventListener:

parent.addEventListener("click", () => {
  alert("تم الضغط على العنصر الأب");
}, true);

في هذه الحالة، سيبدأ الحدث من العنصر الأب أولاً ثم ينتقل إلى الزر.

2. التعامل مع الأحداث المخصصة

في JavaScript، يمكنك أيضًا إنشاء أحداث مخصصة (Custom Events) التي يمكن استخدامها للإشارة إلى شيء معين في التطبيق، مثل تغيير حالة معينة أو استجابة لمتطلبات خاصة. تتيح لك Custom Events إرسال إشعارات عبر التطبيق والتفاعل معها.

كيفية إنشاء حدث مخصص:

// إنشاء الحدث المخصص
const event = new CustomEvent("myCustomEvent", {
  detail: { message: "هذه رسالة مخصصة من الحدث" }
});

// إضافة الـ event listener
document.addEventListener("myCustomEvent", (e) => {
  console.log(e.detail.message);  // "هذه رسالة مخصصة من الحدث"
});

// إطلاق الحدث
document.dispatchEvent(event);

في هذا المثال:

  • CustomEvent يسمح بإنشاء حدث جديد يحمل بيانات مخصصة في detail.
  • document.dispatchEvent(event) يُستخدم لإطلاق الحدث المخصص.
  • عند الاستماع للحدث باستخدام addEventListener، يمكننا الوصول إلى البيانات المخصصة داخل detail.

3. استخدام addEventListener و removeEventListener لإدارة الأحداث

تُعد addEventListener و removeEventListener من الطرق الأساسية لإضافة وإزالة أحداث JavaScript. باستخدام هذه الدوال، يمكننا التحكم في كيفية إضافة الأحداث إلى العناصر وإزالتها عندما لا نحتاج إليها.

addEventListener:

تُستخدم لإضافة مستمع (listener) لحدث معين على عنصر ما. تأخذ هذه الوظيفة ثلاث معلمات:

  1. نوع الحدث: مثل "click", "keypress", "mousemove".
  2. دالة المعالج (Callback function): الدالة التي يتم استدعاؤها عند وقوع الحدث.
  3. معامل ثالث اختياري: يتحكم في ترتيب التفاعل بين Event Bubbling و Event Capturing (True أو False).
const button = document.getElementById("myButton");

button.addEventListener("click", function() {
  alert("تم الضغط على الزر!");
});

removeEventListener:

تُستخدم لإزالة مستمع حدث معين من العنصر. يشترط لإزالة المستمع أن تكون الدالة المعالجة التي تم تمريرها إلى addEventListener هي نفسها التي نمررها إلى removeEventListener.

const button = document.getElementById("myButton");

function handleClick() {
  alert("تم الضغط على الزر!");
}

button.addEventListener("click", handleClick);

// لإزالة المستمع
button.removeEventListener("click", handleClick);

في هذا المثال:

  • عند إضافة المستمع، سيتم تنفيذ الدالة handleClick عند الضغط على الزر.
  • عند إزالة المستمع باستخدام removeEventListener، لن يتم تنفيذ الدالة عندما يضغط المستخدم على الزر.

4. الفرق بين addEventListener و onclick

  • addEventListener يتيح لك إضافة العديد من المستمعين لنفس الحدث على نفس العنصر، بينما onclick يسمح فقط بإضافة مستمع واحد.

مثال مع addEventListener:

button.addEventListener("click", () => {
  console.log("تم الضغط على الزر!");
});
button.addEventListener("click", () => {
  console.log("تم الضغط مرة أخرى على الزر!");
});

مثال مع onclick:

button.onclick = () => {
  console.log("تم الضغط على الزر!");
};
button.onclick = () => {
  console.log("تم الضغط مرة أخرى على الزر!");  // سيتم استبدال المستمع السابق
};

الخلاصة

  • Event Bubbling و Event Capturing هما طريقتان لانتقال الحدث عبر عناصر الـ DOM، و Event Bubbling هو الافتراضي.
  • يمكنك التعامل مع الأحداث المخصصة باستخدام CustomEvent و dispatchEvent لتبادل البيانات داخل التطبيق.
  • addEventListener و removeEventListener يتيحان لك إضافة وإزالة الأحداث بطريقة مرنة وسهلة، مع إمكانية التفاعل مع الأحداث المتعددة.
  • استخدام addEventListener يسمح لك بإضافة عدة مستمعين لنفس الحدث على نفس العنصر، بينما onclick يقتصر على مستمع واحد فقط.

من خلال هذه الأدوات، يمكنك بناء تطبيقات تفاعلية وديناميكية باستخدام JavaScript.

اكتشاف المزيد من كود التطور

اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.

Related Posts

اترك رد

Scroll to Top