في هذا الدرس 4تصفّح المواضيع
في لغة جافا سكريبت يمكن عن طريق 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 */
});كتابة click event في لغة جافا سكريبت داخل attribute العنصر في صفحة HTML.
JavaScript click event attribute
يتم تشغيل حدث معين مع النقر بزر mouse اليسار في لغة جافا سكريبت.
JavaScript click event attribute hide
يتم تشغيل حدث معين مع scroll داخل صفحة الويب في لغة جافا سكريبت.
<button class="btn" onclick="document.getElementById('paragraph').style.visibility = 'hidden'">hidde text</button>كتابة 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';
};كتابة 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';
});سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.