JavaScript

JavaScript Mouse Events
أحداث mouse في لغة جافا سكريبت

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

التاريخ

24 نوفمبر 2022

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

865

المواضيع

24
الشروحات 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";
});
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.