التعامل مع الأحداث في JavaScript

Articles

تشرح هذه المقالة كيفية التعامل مع الأحداث في JavaScript۔

YouTube Video

javascript-html-event.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container-flex">
105        <div class="left-column">
106            <h2>HTML Sample</h2>
107            <div id="parentDiv">
108                <button id="myButton">Click me</button>
109            </div>
110        </div>
111
112        <div class="right-column">
113            <h2>Form Sample</h2>
114            <form id="myForm">
115                <input type="text" name="username">
116                <button type="submit">Submit</button>
117            </form>
118        </div>
119    </div>
120
121    <div class="container">
122        <h1>JavaScript Console</h1>
123        <button id="executeBtn">Execute</button>
124        <div id="output"></div>
125    </div>
126
127    <script>
128        // Override console.log to display messages in the #output element
129        (function () {
130            const originalLog = console.log;
131            console.log = function (...args) {
132                originalLog.apply(console, args);
133                const output = document.getElementById('output');
134                output.textContent += args.map(String).join(' ') + '\n';
135            };
136        })();
137
138        document.getElementById('executeBtn').addEventListener('click', () => {
139            // Prevent multiple loads
140            if (document.getElementById('externalScript')) return;
141
142            const script = document.createElement('script');
143            script.src = 'javascript-html-event.js';
144            script.id = 'externalScript';
145            //script.onload = () => console.log('javascript-html-event.js loaded and executed.');
146            //script.onerror = () => console.log('Failed to load javascript-html-event.js.');
147            document.body.appendChild(script);
148        });
149    </script>
150</body>
151</html>

التعامل مع الأحداث في JavaScript

التعامل مع الأحداث في JavaScript هو آلية لتنفيذ إجراءات محددة استجابةً لعمليات المستخدم (مثل النقرات وإدخال لوحة المفاتيح) أو إجراءات المتصفح۔ من خلال إعداد مستمعي الأحداث، يمكنك إنشاء صفحات ويب ديناميكية وتفاعلية۔

أساسيات الأحداث

تحدث الأحداث استجابةً لعمليات المستخدم وإجراءات المتصفح۔ عند حدوث الحدث، يتم تنفيذ معالج الأحداث المرتبط (الدالة)۔ على سبيل المثال، توجد أحداث مثل الآتي:۔

نقرة (click)
إدخال لوحة المفاتيح (keydown, keyup)
حركة المؤشر (mousemove, mouseover)
إرسال النموذج (submit)
إتمام تحميل الصفحة (DOMContentLoaded)
التمرير (scroll)

إضافة مستمعي الأحداث

يتم إعداد مستمعي الأحداث باستخدام الطريقة addEventListener()۔ تستدعي هذه الطريقة دالة معينة عند حدوث الحدث المحدد۔

البنية الأساسية لـ `addEventListener()`

1element.addEventListener(event, handler);

العنصر هو عنصر HTML الذي يراقب الحدث۔
الحدث هو اسم الحدث (على سبيل المثال، click)۔
المعالج هو الدالة التي تنفذ عند حدوث الحدث۔

كائن الحدث

عندما يحدث حدث، يقوم JavaScript بتمرير كائن الحدث الذي يحتوي على تفاصيل الحدث إلى معالج الحدث۔ يتضمن هذا الكائن معلومات مثل العنصر الذي تسبب في الحدث والمفتاح الذي تم الضغط عليه۔

مثال: استخدام كائن الحدث

1<button id="myButton">Click me</button>

1const button = document.getElementById('myButton');
2
3button.addEventListener('click', (event) => {
4    console.log(event);  // Display event details in the console
5    console.log('Clicked element:', event.target);  // Display the clicked element
6});

يستخدم هذا الكود كائن الحدث لعرض معلومات مفصلة والعنصر الذي تم النقر عليه في وحدة التحكم عند النقر على الزر۔

الأحداث النموذجية

حدث النقر

يحدث حدث click عندما ينقر المستخدم على عنصر۔

1element.addEventListener('click', () => {
2    console.log('Clicked');
3});

يعرض هذا الكود رسالة في وحدة التحكم عند النقر على العنصر۔

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

تحدث أحداث keydown و keyup عندما يضغط المستخدم على مفتاح أو يطلقه۔ يمكنك استخدام event.key لمعرفة المفتاح الذي تم الضغط عليه۔

1document.addEventListener('keydown', (event) => {
2    console.log(`Key pressed: ${event.key}`);
3});

يعرض هذا الكود اسم المفتاح في وحدة التحكم عندما يضغط المستخدم على مفتاح۔

أحداث الفأرة

تحدث أحداث mousemove و mouseover عند حركة الفأرة أو التوقف بمؤشر الفأرة فوق عنصر۔

1document.addEventListener('mousemove', (event) => {
2    console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});

يعرض هذا الكود الموضع (إحداثيات X و Y) في وحدة التحكم في كل مرة تتحرك فيها الفأرة۔

أحداث النماذج

تشمل الأحداث المتعلقة بالنماذج submit و input۔ يحدث حدث submit عند إرسال نموذج وعادة ما يؤدي ذلك إلى تحديث الصفحة، ولكن غالبًا ما يتم استخدام event.preventDefault() لمنع ذلك۔

مثال: منع تحديث الصفحة عند إرسال النموذج

1<form id="myForm">
2    <input type="text" name="username">
3    <button type="submit">Submit</button>
4</form>

1const form = document.getElementById('myForm');
2
3form.addEventListener('submit', (event) => {
4    event.preventDefault();  // Prevent page reload
5    console.log('Form has been submitted');
6});

يمنع هذا الكود إعادة تحميل الصفحة عند إرسال النموذج ويعرض رسالة في وحدة التحكم بدلاً من ذلك۔

انتشار الأحداث (التصاعد والالتقاط)

تنتشر الأحداث عبر مرحلتين: مرحلة الالتقاط، التي تنتقل من العناصر الأب إلى العناصر الابن، ومرحلة التصاعد، التي تنتقل من العناصر الابن إلى العناصر الأب۔

تصاعد الأحداث

بشكل افتراضي، تحدث الأحداث عند العنصر الأعمق ثم تنتشر إلى الخارج۔ يطلق على هذا اسم التصاعد۔

مثال: مثال على التصاعد

1<div id="parentDiv">
2    <button id="myButton">Click me</button>
3</div>

 1const parent = document.getElementById('parentDiv');
 2const button = document.getElementById('myButton');
 3
 4parent.addEventListener('click', () => {
 5    console.log('Parent element was clicked');
 6});
 7
 8button.addEventListener('click', () => {
 9    console.log('Button was clicked');
10});

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

التقاط الأحداث

عند تحديد true كمعامل ثالث في addEventListener()، يمكنك التعامل مع الأحداث في مرحلة الالتقاط۔

1parent.addEventListener('click', () => {
2    console.log('Capturing: Parent element was clicked');
3}, true);

يتعامل هذا الكود مع حدث النقر لعنصر الأب في مرحلة الالتقاط ويعرض رسالة في وحدة التحكم۔

منع الانتشار باستخدام `stopPropagation()`

يمكنك إيقاف انتشار الأحداث باستخدام event.stopPropagation()۔

1button.addEventListener('click', (event) => {
2    event.stopPropagation();  // Stop the event propagation
3    console.log('Button was clicked (no propagation)');
4});

يمنع هذا الكود الحدث من الانتقال عند النقر على الزر ويعرض رسالة في وحدة التحكم۔

إزالة الأحداث

يمكنك إزالة مستمعي الأحداث باستخدام removeEventListener()۔ لإزالة مستمع الحدث، تحتاج إلى مرجع للدالة المحددة في addEventListener()۔

1function handleClick() {
2    console.log('Clicked');
3}
4
5const button = document.getElementById('myButton');
6button.addEventListener('click', handleClick);
7button.removeEventListener('click', handleClick);  // Remove the event listener

يزيل هذا الكود مستمع حدث النقر من الزر بحيث لا يتم التعامل معه بعد ذلك عند النقر۔

أحداث مخصصة

في JavaScript، يمكنك إنشاء وتفعيل أحداث مخصصة بالإضافة إلى الأحداث القياسية۔ استخدم المُنشئ CustomEvent۔

 1document.addEventListener('myCustomEvent', (event) => {
 2    console.log(event.detail.message);  // Displays "Hello!"
 3});
 4
 5const event = new CustomEvent('myCustomEvent', {
 6    detail: {
 7        message: 'Hello!'
 8    }
 9});
10document.dispatchEvent(event);

ينشئ هذا الكود ويرسل حدثًا مخصصًا باسم myCustomEvent، ويعرض تفاصيله في وحدة التحكم۔

الملخص

معالجة الأحداث هي عنصر أساسي لتعزيز التفاعل في تطبيقات الويب۔ من خلال الاستفادة من مكونات معالجة الأحداث، يمكنك تقديم تجربة مستخدم أكثر مرونة وتطورًا۔

مستمع الحدث: استخدم addEventListener() لتعيين معالج حدث على عنصر۔
كائن الحدث: عندما يحدث حدث، يتم تمرير كائن الحدث ويمكن استخدامه للحصول على معلومات مفصلة۔
انتشار الحدث: تنتشر الأحداث في مرحلتين: الفقاعة والالتقاط۔
أحداث النماذج والأحداث المخصصة: يمكنك التعامل مع إرسال النماذج وأحداثك المخصصة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

سجلدوم في جافا سكريبت

التعامل مع الأحداث في JavaScript

YouTube Video

التعامل مع الأحداث في JavaScript

أساسيات الأحداث

إضافة مستمعي الأحداث

البنية الأساسية لـ addEventListener()

كائن الحدث

مثال: استخدام كائن الحدث

الأحداث النموذجية

حدث النقر

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

أحداث الفأرة

أحداث النماذج

مثال: منع تحديث الصفحة عند إرسال النموذج

انتشار الأحداث (التصاعد والالتقاط)

تصاعد الأحداث

مثال: مثال على التصاعد

التقاط الأحداث

منع الانتشار باستخدام stopPropagation()

إزالة الأحداث

أحداث مخصصة

الملخص

YouTube Video

البنية الأساسية لـ `addEventListener()`

منع الانتشار باستخدام `stopPropagation()`