Lesson 6 / الدرس 6

Events: making the page respond / الأحداث: جعل الصفحة تستجيب

Everything interactive is the same shape: something happens, and a function you wrote runs. One method attaches that function, and understanding that it is not called by you is the whole idea.

وكل تفاعلي هو الشكل نفسه: يحدث شيء فتعمل دالة كتبتها. وطريقة واحدة تربط تلك الدالة، وفهم أنك لست من يستدعيها هو الفكرة كلها.

addEventListener

button.addEventListener('click', function () {
  console.log('clicked');
});
        └──┬──┘  └──────────────┬──────────────┘
           │                    └ the function to run, LATER
           └────────────────────── what to wait for

You are not calling that function. The browser will.

That last line is the mental shift. You hand the browser a function and it holds onto it, calling it every time the event happens — possibly never, possibly a hundred times. Run the demonstration.

The events worth knowing first

Event	Fires when	On
click	Pressed — mouse, touch, or Enter on a button	Anything
input	The value changes, on every keystroke	Inputs and textareas
change	The value changed AND focus left	Inputs, selects
submit	A form is submitted	The form, not the button
focus / blur	A control gains or loses focus	Form controls, links
keydown	A key goes down	Anything focused
DOMContentLoaded	The tree is built	document

Two of these are worth pointing at. click also fires when a keyboard user presses Enter on a real <button> — which is why the element choice from the framework course matters. And submit belongs on the form; listening to the button's click misses someone pressing Enter in a text field.

واثنان منها يستحقان الإشارة. فـclick يُطلق أيضًا حين يضغط مستخدم لوحة المفاتيح Enter على <button> حقيقي — ولهذا يهم اختيار العنصر من دورة الأطر. وsubmit ينتمي إلى النموذج؛ والاستماع إلى نقر الزر يفوّت من يضغط Enter في حقل نص.

ولا تضع القوسين على الدالة التي تمررها. فـaddEventListener("click", handleClick()) يستدعي handleClick فورًا لحظة تحميل الصفحة، ويسلّم المتصفح ما أعادته — وundefined عادةً. والعَرَض المرئي أن الشيء يحدث مرة عند التحميل ولا يحدث أبدًا عند النقر. وهو تمييز القوسين نفسه من الدرس 18 في دورة الأساسيات، وهنا يعضّ أشد ما يكون.

You may also see button.onclick = …, which works and has one limitation worth knowing: an element can only have one onclick, so assigning a second silently replaces the first. addEventListener can attach as many as you like, and can remove them again with removeEventListener. Prefer it — the demonstrations in this course use onclick only where brevity matters more.

وقد ترى أيضًا button.onclick = …، وهي تعمل ولها قيد يستحق المعرفة: فللعنصر onclick واحد فقط، فإسناد ثانٍ يستبدل بالأول بصمت. وaddEventListener يستطيع ربط ما شئت، ويستطيع إزالتها بـremoveEventListener. ففضّله — والعروض في هذه الدورة لا تستخدم onclick إلا حيث يهم الاختصار أكثر.

Try it live / جرّب بنفسك

<form id="form">
  <input id="name" placeholder="your name">
  <button>Send</button>
</form>
<pre id="log"></pre>

<script>
  const lines = [];
  function log(m) {
    lines.unshift(m);
    document.getElementById('log').textContent = lines.slice(0, 10).join('\n');
  }

  document.getElementById('form').addEventListener('submit', function (event) {
    event.preventDefault();
    log('submit');
  });

  // your other three listeners here
</script>

Preview / المعاينة

Check yourself / اختبر نفسك

1. What is wrong with addEventListener("click", handleClick())?

ما الخطأ في addEventListener("click", handleClick())؟

2. Where should a submit listener go?

أين ينبغي أن يذهب مستمع submit؟

3. Why prefer addEventListener over onclick?

لماذا تفضّل addEventListener على onclick؟

Your task / مهمتك

Build a page that responds to four different events, logging each one to a visible list as it happens: a click, typing in a field, a field losing focus, and a form being submitted. Then deliberately make the brackets mistake on one listener, show what happens, and describe the symptom in your own words — since that symptom is what you will actually see in future, not the cause.

ابنِ صفحة تستجيب لأربعة أحداث مختلفة، مسجّلة كل واحد في قائمة مرئية وهو يحدث: نقرة، وكتابة في حقل، وحقل يفقد التركيز، ونموذج يُرسَل. ثم ارتكب خطأ القوسين عمدًا على مستمع واحد، وأظهر ما يحدث، وصف العَرَض بكلماتك — فذلك العَرَض هو ما ستراه مستقبلًا لا السبب.

Four different events, each logged visibly أربعة أحداث مختلفة كل واحد مسجَّل بوضوح
The submit listener on the form, not the button مستمع submit على النموذج لا الزر
addEventListener used throughout addEventListener مستخدم في كل مكان
The brackets mistake shown, with its symptom described خطأ القوسين معروضًا مع وصف عَرَضه