الأحداث في JavaScript: النقروالنقر المزدوج وغيرها

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

يمكن استخدام الأحداث `addEventListener` أو الطريقة المباشرة `onclick` لتنفيذ الكود عند حدوث الأحداث المستهدفة.

```javascript
// استخدام addEventListener للنقر
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();

// إضافة مستمع لحدث النقر على زر حذف المهارة
_li.querySelector('.remove').addEventListener('click', function() {
removeSkill(this);
);

يمكنك إضافة استماع لحدث النقر المزدوج بالتعليق على الكود التالي
// _li.querySelector('.remove').addEventListener('dblclick', function() {
removeSkill(this, true);
// });

إضافة استماع لحدث التركيز والتوقف عند التركيز على حقل الإدخال
_input.addEventListener('focus', function() {
inputType(this, 'focus');
);

_input.addEventListener('blur', function() {
inputType(this, 'blur');

// دالة لإزالة المهارة
function removeSkill(element, removeDirectly = false) {
if (removeDirectly) {
element.parentElement.remove();
else {
element.parentElement.querySelector('input').style.backgroundColor = 'red';

setTimeout(function() {
var confirmRemovingElement = confirm('هل أنت متأكد من حذف هذا العنصر؟');
if (confirmRemovingElement) {
element.parentElement.remove();
else {
element.parentElement.querySelector('input').style.backgroundColor = 'initial';
, 500, element);

// دالة لتغيير نوع الإدخال عند التركيز أو الخروج منه
function inputType(_input, event) {
if (event === 'focus') {
var placeholder = _input.getAttribute('placeholder');
_input.setAttribute('data-placeholder', placeholder);
_input.setAttribute('placeholder', '');
} else if (event === 'blur') {
var dataPlaceholder = _input.getAttribute('data-placeholder');
_input.setAttribute('placeholder', dataPlaceholder);
_input.setAttribute('data-placeholder', '');

```

الخلاصة

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