JavaScript

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

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

التاريخ

19 نوفمبر 2022

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

918

المواضيع

24
الشروحات chevron_left JavaScript Click Event chevron_left JavaScript

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

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

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


طرق كتابة JavaScript event:

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

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

<button onclick="JavaScript code here">Click</button>
event function syntax

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

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

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

element.addeventListener('click', function(){
  /* code will execute */
});
addEventListener with arrow function syntax

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

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

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

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

JavaScript click event attribute

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

<button class="btn" onclick="alert('Welcome to CloseTag')">Click</button>
JavaScript click event attribute hide

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

<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 اليسار في لغة جافا سكريبت.

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 في لغة جافا سكريبت.

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 في لغة جافا سكريبت.

let btn = document.getElementById("btn");
let paragraph = document.getElementById("paragraph");
btn.addEventListener('click',()=>{
  paragraph.style.visibility= 'hidden';
});
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
1
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات