استخدام الأحداث في JavaScript: النقر والنقر المزدوج

في هذا الدرس، سنتعلم كيفية استخدام الأحداث للتفاعل مع العناصر في صفحات الويب. سنركز على الأحداث `click` و `dblclick`.

 النقر البسيط (`click`)

النقر (`click`) هو الحدث الذي يتم تنشيطه عندما ينقر المستخدم على عنصر ما. في الكود التالي، سنقوم بإضافة مهارة جديدة إلى قائمة الأساليب عند النقر على زر محدد.

```javascript
// الحصول على عنصر زر الإضافة
var _addSkill = document.getElementById('add-skill');

// إضافة مستمع لحدث النقر
_addSkill.addEventListener('click', function() {
// جلب عناصر القائمة والتحقق من وجود أخطاء سابقة
var _skills = document.getElementById('skills'),
_li = document.createElement('li'),
_input = document.createElement('input'),
_span = document.createElement('span'),
inputs = _skills.querySelectorAll('input'),
errors = _skills.querySelectorAll('.error'),
error = false;

// إزالة رسائل الخطأ السابقة إن وجدت
if (errors != null) {
for (var _error of errors) {
_error.remove();

// التحقق من تعبئة الحقول قبل إضافة مهارة جديدة
if (inputs != null) {
for (var input of inputs) {
if (input.value.trim().length <= 0) {
// عرض رسالة الخطأ إذا كان الحقل فارغًا
if (input.parentElement.querySelector('p.error') != null) {
input.parentElement.querySelector('p.error').innerText = 'من فضلك، هذا الحقل مطلوب';
else {
var _errorElement = document.createElement('p');
_errorElement.classList.add('error');
_errorElement.innerText = 'من فضلك، هذا الحقل مطلوب';
input.parentElement.append(_errorElement);

error = true;
input.focus();

// إزالة رسالة الخطأ عند بدء الكتابة مجددًا
input.addEventListener('keydown', function() {
var _error = this.parentElement.querySelector('p.error');
if (_error != null) {
_error.remove();
break;

// إذا لم يكن هناك أخطاء، قم بإضافة الحقل الجديد إلى قائمة المهارات
if (error === false) {
_input.setAttribute('type', 'text');
_input.setAttribute('placeholder', 'شاركنا مهاراتك');

_span.classList.add('remove');
_span.innerText = ' - ';

_li.append(_input);
_li.append(_span);

_skills.append(_li);
_skills.children[_skills.childElementCount - 1].querySelector('input').focus();

);
```

 النقر المزدوج (`dblclick`)

النقر المزدوج (`dblclick`) هو الحدث الذي يتم تنشيطه عندما ينقر المستخدم مرتين بسرعة على عنصر ما. يمكن استخدام هذا الحدث لتنفيذ إجراءات معينة بناءً على النقر المزدوج على عناصر محددة في صفحتك.

الخلاصة

يمكنك الآن تطبيق هذه المفاهيم في مدونتك لتعزيز تجربة المستخدم وتفعيل التفاعل بين المستخدمين والمحتوى الخاص بك بشكل أكبر.