حدث (Events) لـ JavaScript

حدث هو عملية تحدث في المتصفح، يمكن أن يتم إطلاقها من قبل المستخدم أو المتصفح نفسه.

إليك بعض الأمثلة على الحدث الشائع التي قد تحدث على الموقع:

• انتهاء تحميل الصفحة

• نقر المستخدم على زر

• تدوير المستخدم للنص

• تغيير حجم المستعرض

• تحريك المستخدم للفأرة

• تقديم المستخدم للنموذج

• النقر المستخدم على زر مفاتيح لوحة المفاتيح

• تغيير حقل الإدخال HTML

لديكل حدث خاصيةمعالج الحدث،معالج الحدثهي مكتبة الكود (عادة ما تكون وظيفة JavaScript محددة من قبل المستخدم)، التي سيتم تشغيلها عند إطلاق الحدث.

من خلال فهم الحدث، ستتمكن من تقديم تجربة شبكة أكثر تفاعلية للمستخدمين النهائيين.

مثال بسيط

عند إطلاق الحدث، مثل النقر المستخدم على الزر، يمكن تنفيذ مكتبة JavaScript الكود.

في المثال التالي، لدينا زر، عند الضغط عليه يتم استدعاءshowDate()وظيفة:

<button onclick="showDate()">انقر هنا</button>

JavaScript showDate()الوظيفة كما يلي:

<script>
function showDate() {
　　　document.getElementById("output").innerHTML = new Date();
}
</script>

طرق استخدام الحدث

يمكن توزيع الحدث على العنصر بثلاث طرق، لجعل تشغيله عند إطلاق الحدث المرتبط ممكنًا:

• معالج الحدث المدمج

• خصائص معالج الحدث

• مراقب الحدث

سنقوم بشرح جميع ثلاثة الطرق، لضمان ملاحظتك لكل طريقة من طرق إطلاق الحدث.

خصائص معالجة الحدث المدمجة

لإسناد الحدث إلى عنصر HTML، يمكننا استخدامخصائص الحدث HTML.

في المثال التالي، عند ضرب<p>عند ضرب العنصر، سيتم تغيير محتواه:

<p onclick="this.innerHTML = 'Hello world'">انقر هنا لتغيير هذا النص</p>

في المثال التالي، عند ضرب<p>عند ضرب العنصر، سيتم استدعاء دالة:

<p onclick="changeText(this)">انقر هنا لتغيير هذا النص</p>
<script>
function changeText(self) {
　　　self.innerHTML = "Hello world";
}
</script>

في المثال التالي، لدينا زر، عند الضغط عليه سيتم تغيير لون الخلفية إلى لون عشوائي:

<button onclick="bgChange()">ضغط لي</button>
<script>
function bgChange() {
　　　let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
　　　document.body.style.backgroundColor = color;
}
</script>

معالج الحدث المدمج هو طريقة بسيطة لفهم الحدث، ولكن لا يجب استخدامه لأغراض الاختبار والتعليم عادة.

خصائص معالج الحدث

الخطوة التالية لمعالج الحدث المدمج هيخصائص معالج الحدثهذا يشبه معالج الحدث المدمج بشكل كبير، باستثناء أننا نضبط خصائص العنصر في JavaScript بدلاً من HTML.

في المثال التالي، سنقوم بتخصيص حدث onclick للعنصر HTML ذو id "para":

let para = document.querySelector("#para");
para.onclick = function() {
　　　this.innerHTML = "Hello world";
}

يمكننا أيضًا تعيين خاصية معالج الحدث إلى مساوية لاسم الدالة المسمى:

let para = document.querySelector("#para");
para.onclick = changeText;
function changeText() {
　　　para.innerHTML = "Hello world";
}

في المثال السابق، سيتم تخصيص اسمchangeTextالوظيفة المخصصة لـid="para"عنصر HTML.

عند ضرب العنصر سينفذ هذا الدور.

في المثال التالي، لدينا زر، عند الضغط عليه سيتم تغيير لون الخلفية إلى لون عشوائي:

let btn = document.querySelector("button");
btn.onclick = bgChange;
function bgChange() {
　　　let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
　　　document.body.style.backgroundColor = color;
}

ملاحظة:معالج الحدثلا يتبعمعظم كود JavaScript يتبع اتفاقية التسمية camelCase. لاحظ أن الكود هوonclick،ليسonClick.

أحداث onfocus و onblur

onfocus تُشغل هذه الحدثة عند الحصول على العنصر للتركيز.

onblur تُشغل هذه الحدثة عند فقد العنصر للتركيز.

<input type="text" onfocus="func1(this)" onblur="func2(this)">

حدث onchange

onchange تُشغل هذه الحدثة عند تغيير قيمة العنصر.

<input type="text" onchange="myFunc(this)" value="Hello">

أحداث onmouseover و onmouseout

onmouseover تُشغل هذه الحدثة عند تحريك جهاز الإشارة (عادة ما يكون الفأرة) إلى العنصر أو أحد أبنائه.

onmouseout تُشغل هذه الحدثة عند إزالة جهاز الإشارة (عادة ما يكون الفأرة) من العنصر أو أحد أبنائه.

قراءة متابعة

مرجع HTMLمرجع خصائص الأحداث HTML

مرجع JavaScriptمرجع لعدة أهداف DOM