انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 57
دورة جافا سكريبت

حدث click في لغة جافا سكريبتJavaScript Click Event

سوف تتعلم في هذا الدرس كيفية استخدام الأحداث مع mouse في لغة جافا سكريبت وتنفيذ أمر برمجي عند احتكام المستخدم مع mouse.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
9
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,474
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

JavaScript mouse click Event أحداث النقر بزر mouse الأيسر في لغة جافا سكريبت

في لغة جافا سكريبت يمكن عن طريق click احتكاك المستخدم مع زر mouse الأيسر بتنفيذ أمر برمجي داخل صفحة الويب.


طرق كتابة JavaScript event:

  • event attribute بداخل علامة open tag للعنصر عن طريق خصائص جافا سكريبت.
  • event methods عن طريق دوال مجهزة في لغة جافا سكريبت
  • addEventListener عن طريق هذه الدالة.

event attribute syntax

كتابة event جافا سكريبت داخل العنصر في صفحة HTML.

HTML 
<button onclick="JavaScript code here">Click</button>

event function syntax

كتابة event جافا سكريبت داخل ملف أو أوامر جافا سكريبت.

HTML 
element.onclick = function(){
  /* code will execute */
};

addEventListener syntax

كتابة event عن طريق دالة addeventListener في لغة جافا سكريبت.

HTML 
element.addeventListener('click', function(){
  /* code will execute */
});

addEventListener with arrow function syntax

كتابة event عن طريق دالةaddeventListener مع arrow function في لغة جافا سكريبت.

HTML 
element.addeventListener('click', ()=>{
  /* code will execute */
});

JavaScript click event attribute حدث click مع attribute في لغة جافا سكريبت

كتابة click event في لغة جافا سكريبت داخل attribute العنصر في صفحة HTML.

JavaScript click event attribute

يتم تشغيل حدث معين مع النقر بزر mouse اليسار في لغة جافا سكريبت.

HTML 
<button class="btn" onclick="alert('Welcome to CloseTag')">Click</button>
جرّب بنفسك

JavaScript click event attribute hide

يتم تشغيل حدث معين مع scroll داخل صفحة الويب في لغة جافا سكريبت.

HTML 
<button class="btn" onclick="document.getElementById('paragraph').style.visibility = 'hidden'">hidde text</button>
جرّب بنفسك

JavaScript click function event حدث click مع function في لغة جافا سكريبت

كتابة click event في لغة جافا سكريبت مع function في جافا سكريبت.

JavaScript click function event

يتم تشغيل حدث معين مع النقر بزر mouse اليسار في لغة جافا سكريبت.

HTML 
let btn = document.getElementById("btn");
let paragraph = document.getElementById("paragraph");
btn.onclick = function(){
  paragraph.style.visibility= 'hidden';
};
جرّب بنفسك

JavaScript click event addeventListener حدث click مع addeventListener في لغة جافا سكريبت

كتابة click event مع addeventListener في لغة جافا سكريبت.

JavaScript click event addeventListener

حدث click مع addeventListener في لغة جافا سكريبت.

HTML 
let btn = document.getElementById("btn");
let paragraph = document.getElementById("paragraph");
btn.addEventListener('click',function(){
  paragraph.style.visibility= 'hidden';
});
جرّب بنفسك

JavaScript click event addeventListener arrow

حدث click مع addeventListener مع دالة arrow في لغة جافا سكريبت.

HTML 
let btn = document.getElementById("btn");
let paragraph = document.getElementById("paragraph");
btn.addEventListener('click',()=>{
  paragraph.style.visibility= 'hidden';
});
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…