JavaScript Click Event
حدث click في لغة جافا سكريبت
سوف تتعلم في هذا الدرس كيفية استخدام الأحداث مع mouse في لغة جافا سكريبت وتنفيذ أمر برمجي عند احتكام المستخدم مع mouse.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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';
});
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
