JavaScript: الأحداث في JavaScript

// مثال على الكود في هذا القسم
const message = "مرحبا بالعالم!";
console.log(message);

<button onclick="alert('لا تستخدم هذه الطريقة')">انقر هنا</button>

<button id="myBtn">انقر هنا</button>
<script>
const btn = document.getElementById('myBtn');
btn.onclick = function() {
  console.log('تم النقر');
};
</script>

<button id="btn1">زر 1</button>
<button id="btn2">زر 2</button>
<script>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
btn1.addEventListener('click', function() {
  console.log('المعالج 1');
});
btn1.addEventListener('click', function() {
  console.log('المعالج 2');
});
</script>

<script>
element.addEventListener('eventName', handler, options);
element.removeEventListener('eventName', handler);
</script>

<button id="btn">اختبار</button>
<script>
const btn = document.getElementById('btn');

function handler() { console.log('يُفعّل مرة واحدة فقط'); }
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);  // تمت الإزالة بنجاح

btn.addEventListener('click', function() { console.log('مجهول'); });
btn.removeEventListener('click', function() { console.log('مجهول'); });  // الإزالة تفشل!
</script>

<button id="counter">تم النقر 0 مرة</button>

<script>
const btn = document.getElementById('counter');
let count = 0;

btn.addEventListener('click', function(e) {
  count++;
  btn.textContent = 'تم النقر ' + count + ' مرة';
  console.log('نوع الحدث:', e.type);
  console.log('العنصر المستهدف:', e.target.tagName);
});
</script>

<p>اضغط أي مفتاح لرؤية المعلومات</p>
<div id="info" style="padding: 10px; border: 1px solid #ccc; min-height: 30px;"></div>

<script>
const info = document.getElementById('info');

document.addEventListener('keydown', function(e) {
  info.innerHTML = 'المفتاح: <b>' + e.key + '</b> | KeyCode: ' + e.keyCode + ' | Ctrl: ' + e.ctrlKey + ' | Shift: ' + e.shiftKey;
});
</script>

<form id="myForm">
  <input type="text" id="name" placeholder="أدخل الاسم" required>
  <button type="submit">إرسال</button>
</form>
<p id="result"></p>

<script>
const form = document.getElementById('myForm');
const result = document.getElementById('result');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  const name = document.getElementById('name').value;
  result.textContent = 'مرحباً، ' + name + '! تم اعتراض النموذج، لم يُرسل فعلياً.';
});
</script>

<ul id="menu">
  <li>الرئيسية</li>
  <li>حول</li>
  <li>اتصل بنا</li>
  <li>مساعدة</li>
</ul>
<p id="selected"></p>

<script>
const menu = document.getElementById('menu');
const selected = document.getElementById('selected');

menu.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    selected.textContent = 'اخترت: ' + e.target.textContent;
  }
});
</script>

     window
       ↓ الالتقاط
    document
       ↓
      body
       ↓
   عنصر الهدف ← مرحلة الهدف
       ↑ الفقاعات
      body
       ↑
    document
       ↑
     window