JavaScript Mouse Events
أحداث mouse في لغة جافا سكريبت
سوف تتعلم في هذا الدرس أهم الأحداث التفاعلية في لغة سكريبت وهي الناتجة من احتكاك المستخدم مع صفحة الويب عن طريق mouse مثل click و double click.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left JavaScript Mouse Events chevron_left JavaScript
JavaScript Mouse Events
أحداث mouse في لغة جافا سكريبت
</>
JavaScript double click event
حدث النقرة المزدوجة في لغة جافا سكريبت
في لغة جافا سكريبت يمكن عن طريق النقر المزدوج double click احتكاك المستخدم مع زر mouse الأيسر مرتين بتنفيذ أمر برمجي داخل صفحة الويب.
JavaScript double click event attribute
كتابة event جافا سكريبت داخل العنصر في صفحة HTML.
<button class="btn" id="btn" ondblclick="document.getElementById('paragraph').style.visibility= 'hidden'">hidde text</button>
JavaScript double click event function
كتابة event جافا سكريبت داخل دالة في جافا سكريبت.
let btn = document.getElementById("btn");
let paragraph = document.getElementById("paragraph");
btn.ondblclick = function(){
paragraph.style.visibility= 'hidden';
}
JavaScript double click event addEventListener
كتابة event جافا سكريبت داخل دالة addEventListener في جافا سكريبت.
let btn = document.getElementById("btn");
let paragraph = document.getElementById("paragraph");
btn.addEventListener('dblclick',()=>{
paragraph.style.visibility= 'hidden';
});
</>
JavaScript oncontextmenu event
حدث عند النقر يمين بزر mouse في لغة جافا سكريبت
في لغة جافا سكريبت يمكن عند عند النقر يمين بزر mouse في لغة جافا سكريبت يمكن إخفاء القائمة وإظهار قائمة اخري.
JavaScript on contextmenu event function
كتابة event جافا سكريبت داخل دالة في جافا سكريبت.
document.oncontextmenu = function(){
menu.style.display = "inline-block";
}
JavaScript on contextmenu event addEventListener
كتابة event جافا سكريبت داخل دالة addEventListener في جافا سكريبت.
let menu = document.getElementById('menu');
document.addEventListener("contextmenu", function(e) {
e.preventDefault();
menu.style.display = "inline-block";
});
</>
JavaScript on mouse enter event
حدث عند وقوف بمؤشر mouse علي العنصر في لغة جافا سكريبت
في لغة جافا سكريبت يمكن عند تمرير ثم الوقوف علي العنصر بمؤشر mouse في لغة جافا سكريبت يمكن تنفيذ أمر برمجي.
JavaScript double on mouse enter attribute
كتابة event جافا سكريبت داخل العنصر في صفحة HTML.
<button class="btn" id="btn" onmouseenter="document.getElementById('paragraph').style.visibility= 'hidden'">Enter mouse pointer</button>
JavaScript on mouse enter event function
كتابة event جافا سكريبت داخل دالة في جافا سكريبت.
btn.onmouseenter = function(){
paragraph.style.visibility = "hidden";
}
JavaScript on mouse enter event addEventListener
كتابة event جافا سكريبت داخل دالة addEventListener في جافا سكريبت.
btn.addEventListener("mouseenter", function() {
paragraph.style.visibility = "hidden";
});
</>
JavaScript on mouse leave event
حدث عند تحريك مؤشر mouse خارج العنصر في لغة جافا سكريبت
في لغة جافا سكريبت يمكن عند تمرير ثم الوقوف علي العنصر بمؤشر mouse في لغة جافا سكريبت يمكن تنفيذ أمر برمجي.
JavaScript on mouse leave attribute
كتابة event جافا سكريبت داخل العنصر في صفحة HTML.
<button class="btn" id="btn" onmouseleave="document.getElementById('paragraph').style.visibility= 'hidden'">Enter mouse pointer</button>
JavaScript on mouse leave event function
كتابة event جافا سكريبت داخل دالة في جافا سكريبت.
btn.onmouseleave = function(){
paragraph.style.visibility = "hidden";
}
JavaScript on mouse leave event addEventListener
كتابة event جافا سكريبت داخل دالة addEventListener في جافا سكريبت.
btn.addEventListener("mouseleave", function() {
paragraph.style.visibility = "hidden";
});
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
