الأحداث Events

فهم الأحداث Events ومعالجات الأحداث Event Handlers

الحدث هو شيء يحدث عندما يتفاعل المستخدم مع صفحة الويب ، على سبيل المثال عندما ينقر على رابط أو زر ، أو يدخل نصًا في مربع إدخال أو منطقة نصية أو يضغط على مفتاح على لوحة المفاتيح ، أو يحرك مؤشر الفأرة ، او يرسل نموذجًا ، وما إلى ذلك. في بعض الحالات ، يمكن للمتصفح نفسه تشغيل الأحداث ، مثل تحميل الصفحة وتفريغ الأحداث.
عند وقوع حدث ما ، يمكنك استخدام معالج الأحداث event handler لاكتشافها وتنفيذ مهمة معينة أو مجموعة مهام. حسب الاصطلاح ، تبدأ أسماء معالجات الأحداث دائمًا بالكلمة "on" ، لذلك يُطلق على معالج الحدث لحدث النقر اسم onclick ، وبالمثل يسمى معالج الحدث لحدث التحميل onload ، ويسمى معالج الحدث لحدث التمويه onblur ، وما إلى ذلك.
هناك عدة طرق لتحديد معالج الحدث. إن أبسط طريقة هي إضافتها مباشرة إلى وسم البداية لعناصر HTML باستخدام سمات معالجة الأحداث الخاصة. على سبيل المثال ، لتعيين معالج نقر لعنصر زر ، يمكننا استخدام سمة onclick ، مثل هذا:

مثال

تشغيل

<button type="button" onclick="alert('Hello World!')">إضغط هنا</button>

ومع ذلك ، للاحتفاظ بكود JavaScript منفصلًا عن كود HTML ، يمكننا إعداد معالج الأحداث في ملف JavaScript خارجي أو ضمن عنصر <script> كما في المثال التالي :

مثال

تشغيل

<button type="button" id="myBtn">إضغط هنا</button>
<script>
function sayHello() {
alert('Hello World!');
}
document.getElementById("myBtn").onclick = sayHello;
</script>

بشكل عام ، يمكن تصنيف الأحداث إلى أربع مجموعات رئيسية - أحداث الفأرة Mouse Events وأحداث لوحة المفاتيح Keyboard Events وأحداث النموذج Form Events وأحداث المستند/النافذة Document/Window Events . هناك العديد من الأحداث الأخرى ، سنتعرف عليها في دروس لاحقة. في هذا الدرس سوف نتعلم الأحداث الأكثر فائدة واحدة تلو الأخرى بالإضافة إلى امثلة واقعية لطريقة استخدامها.

أحداث الفأرة Mouse Events

يتم تشغيل حدث الفأرة عندما يقوم المستخدم بالنقر فوق عنصر ما ، أو تحريك مؤشر الفأرة فوق عنصر ، وما إلى ذلك. إليك بعض أهم أحداث الفأرة ومعالج الأحداث الخاص بها.

Click (onclick)

يقع الحدث Click عندما ينقر المستخدم على عنصر في صفحة الويب. غالبًا ما تكون عناصر نموذج أو روابط. يمكننا التعامل مع الحدث Click باستخدام معالج الحدث onclick.
سيُظهر لنا المثال التالي رسالة تنبيه عند النقر فوق العناصر.

مثال

تشغيل

<button type="button" onclick="alert('You have clicked a button!')">إضغط هنا</button>
<a href="#" onclick="alert('You have clicked a link!')">إضغط هنا</a>

Contextmenu (oncontextmenu)

يحدث الحدث Contextmenu عندما ينقر المستخدم على زر الفأرة الأيمن على عنصر ما لفتح القائمة المنبثقة. يمكننا معالجة الحدث Contextmenu باستخدام معالج الحدث oncontextmenu.
سيعرض المثال التالي رسالة تنبيه عند النقر بزر الفأرة الأيمن فوق العناصر.

مثال

تشغيل

<button type="button" oncontextmenu="alert('You have right-clicked a button!')"> إضغط هنا بالزر الأيمن للفأرة </button>
<a href="#" oncontextmenu="alert('You have right-clicked a link!')"> إضغط هنا بالزر الأيمن للفأرة </a>

Mouseover (onmouseover)

يقع الحدث mouseover عندما يقوم المستخدم بتحريك مؤشر الفأرة فوق عنصر. يمكننا التعامل مع الحدث mouseover باستخدام معالج حدث onmouseover. سيُظهر لنا المثال التالي رسالة تنبيه عندما تضع الفأرة فوق العناصر.

مثال

تشغيل

<button type="button" onmouseover="alert('You have placed mouse pointer over a button!')">ضع مؤشر الفأرة هنا</button>
<a href="#" onmouseover="alert('You have right-clicked a link!')">ضع مؤشر الفأرة هنا</a>

Mouseout (onmouseout)

يقع حدث mouseout عندما يحرك المستخدم مؤشر الفأرة خارج حدود العنصر.
يمكننا معالجة حدث mouseout باستخدام معالج حدث onmouseout. يُظهر لنا المثال التالي رسالة تنبيه عند وقوع حدث خروج مؤشر الفأرة .

مثال

تشغيل

<button type="button" onmouseout="alert('You have moved out of the button!')">ضع مؤشر الفأرة هنا وقم بتحريكه للخارج</button>
<a href="#" onmouseout="alert('You have moved out of the link!')">ضع مؤشر الفأرة هنا وقم بتحريكه للخارج</a>

أحداث لوحة المفاتيح Keyboard Events

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

Keydown (onkeydown)

يحدث الحدث keydown عندما يضغط المستخدم لأسفل على أحد المفاتيح الموجودة على لوحة المفاتيح.
يمكنك التعامل مع الحدث keydown باستخدام معالج الحدث onkeydown. سيُظهر لنا المثال التالي رسالة تنبيه عند حدوث حدث keydown.

مثال

تشغيل

<input type="text" onkeydown="alert('You have pressed a key inside text input!')">
<textarea onkeydown="alert('You have pressed a key inside textarea!')"></textarea>

Keyup (onkeyup)

يحدث الحدث keyup عندما يقوم المستخدم بتحرير مفتاح على لوحة المفاتيح. يمكننا التعامل مع الحدث keyup باستخدام معالج حدث onkeyup. سيُظهر لنا المثال التالي رسالة تنبيه عند حدوث حدث keyup.

مثال

تشغيل

<input type="text" onkeyup="alert('You have released a key inside text input!')">
<textarea onkeyup="alert('You have released a key inside textarea!')"></textarea>

Keypress (onkeypress)

يحدث الحدث keypress عندما يقوم المستخدم بالضغط على مفتاح على لوحة المفاتيح يحتوي على قيمة مرتبطة به (حروف او رموز ... الخ). على سبيل المثال ، لن تنشئ مفاتيح مثل Ctrl و Shift و Alt و Esc و Arrow keys وما إلى ذلك الحدث keypress ، ولكنها ستنشئ الحدث keydown و keyup.
يمكنك التعامل مع الحدث keypress باستخدام معالج حدث onkeypress. سيُظهر لنا المثال التالي رسالة تنبيه عند حدوث الحدث keypress.

مثال

تشغيل

<input type="text" onkeypress="alert('You have pressed a key inside text input!')">
<textarea onkeypress="alert('You have pressed a key inside textarea!')"></textarea>

أحداث النموذج Form Events

يتم تشغيل حدث النموذج form event عندما يتم التركيز على عنصر تحكم النموذج أو الخروج منه أو عندما يقوم المستخدم بتعديل قيمة عنصر تحكم النموذج ، مثل كتابة نص في عنصر إدخال النص أو تحديد أي خيار في مربع التحديد وما إلى ذلك. فيما يلي بعض أهم أحداث النموذج و معالجتها.

Focus (onfocus)

يقع الحدث focus عندما يركز المستخدم على عنصر في صفحة الويب.
يمكننا التعامل مع الحدث focus باستخدام معالج الحدث onfocus. في المثال التالي ستصبح خلفية إدخال النص باللون الأصفر عندما يتم التركيز على عنصر التحكم .

مثال

تشغيل

<script>
function highlightInput(elm){
elm.style.background = "yellow";
}
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">إرسال</button>

ملاحظة:

تشير الكلمة الأساسية this داخل معالج الأحداث إلى العنصر الذي يحتوي على المعالج (أي مكان تسليم الحدث حاليًا).

Blur (onblur)

يقع الحدث blur عند إزالة التركيز عن عنصر النموذج أو النافذة.
يمكننا التعامل مع الحدث blur باستخدام معالج الحدث onblur. سيُظهر لك المثال التالي رسالة تنبيه عندما يتم إزالة التركيز عن عنصر إدخال النص.

مثال

تشغيل

<input type="text" onblur="alert('Text input loses focus!')">
<button type="button">إرسال</button>

لإزالة التركيز عن عنصر النموذج ، انقر أولاً بداخله ، ثم اضغط على مفتاح Tab بلوحة المفاتيح ، أو ركز على شيء آخر ، أو انقر خارجه.

Change (onchange)

يقع الحدث change عندما يغير المستخدم قيمة عنصر النموذج.
يمكننا معالجة الحدث change باستخدام معالج الحدث onchange. سيُظهر لنا المثال التالي رسالة تنبيه عند تغيير الخيار في قائمة الخيارات.

مثال

تشغيل

<select onchange="alert('You have changed the selection!');">
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>

Submit (onsubmit)

يحدث الحدث submit فقط عندما يرسل المستخدم نموذجًا على صفحة ويب.
يمكننا معالجة الحدث submit باستخدام معالج الحدث onsubmit. سيُظهر لنا المثال التالي رسالة تنبيه أثناء إرسال النموذج إلى الخادم.

مثال

تشغيل

<form action="action.php" method="post" onsubmit="alert('Form data will be submitted to the server!');">
<label>First Name:</label>
<input type="text" name="first-name" required>
<input type="submit" value="Submit" >
</form>

أحداث المستند/النافذة - Document/Window Events

يتم تشغيل الأحداث أيضًا في المواقف التي يتم فيها تحميل الصفحة أو عند قيام المستخدم بتغيير حجم نافذة المتصفح ، وما إلى ذلك. فيما يلي بعض أهم أحداث المستند/النافذة ومعالج الأحداث الخاص بها.

Load (onload)

يقع الحدث load عند انتهاء تحميل صفحة الويب في متصفح الويب.
يمكننا معالجة الحدث load باستخدام معالج الحدث onload. سيُظهر لنا المثال التالي رسالة تنبيه بمجرد انتهاء تحميل الصفحة.

مثال

تشغيل

<body onload="window.alert('Page is loaded successfully!');">
<h1>هذا عنوان</h1>
<p>هذه فقرة</p>
</body>

Unload (onunload)

يحدث الحدث unload عندما يغادر المستخدم صفحة الويب الحالية. يمكننا معالجة الحدث unload باستخدام معالج الحدث onunload. سيُظهر لك المثال التالي رسالة تنبيه عندما تحاول مغادرة الصفحة.

مثال

تشغيل

<body onunload="alert('Are you sure you want to leave this page?');">
<h1>هذا عنوان</h1>
<p>هذه فقرة</p>
</body>

Resize (onresize)

يحدث الحدث resize عندما يقوم المستخدم بتغيير حجم نافذة المتصفح. يحدث أيضًا في المواقف التي يتم فيها تصغير نافذة المتصفح أو تكبيرها.
يمكننا معالجة الحدث resize باستخدام معالج الحدث onresize. سيُظهر لنا المثال التالي رسالة تنبيه عند تغيير حجم نافذة المتصفح إلى عرض وارتفاع جديدين.

مثال

تشغيل

<p id="result"></p>
<script>
function displayWindowSize() {
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height="+ h;
document.getElementById("result").innerHTML = txt;
}
window.onresize displayWindowSize;
</script>