انتقل إلى محتوى الدرس
الدرس 59
دورة جافا سكريبت

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

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

أقسام الدرس
4
الأمثلة
11
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,731
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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

JavaScript double click event attribute

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

HTML
<button class="btn" id="btn" ondblclick="document.getElementById('paragraph').style.visibility= 'hidden'">hidde text</button>

JavaScript double click event function

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

HTML
let btn = document.getElementById("btn");
let paragraph = document.getElementById("paragraph");
btn.ondblclick = function(){
  paragraph.style.visibility= 'hidden';
}

JavaScript double click event addEventListener

كتابة event جافا سكريبت داخل دالة addEventListener في جافا سكريبت.

HTML
let btn = document.getElementById("btn");
let paragraph = document.getElementById("paragraph");
btn.addEventListener('dblclick',()=>{
  paragraph.style.visibility= 'hidden';
});

في لغة جافا سكريبت يمكن عند عند النقر يمين بزر mouse في لغة جافا سكريبت يمكن إخفاء القائمة وإظهار قائمة اخري.

JavaScript on contextmenu event function

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

HTML
document.oncontextmenu = function(){
  menu.style.display = "inline-block";
}

JavaScript on contextmenu event addEventListener

كتابة event جافا سكريبت داخل دالة addEventListener في جافا سكريبت.

HTML
let menu = document.getElementById('menu');
document.addEventListener("contextmenu", function(e) {
  e.preventDefault();
  menu.style.display = "inline-block";
});

في لغة جافا سكريبت يمكن عند تمرير ثم الوقوف علي العنصر بمؤشر mouse في لغة جافا سكريبت يمكن تنفيذ أمر برمجي.

JavaScript double on mouse enter attribute

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

HTML
<button class="btn" id="btn" onmouseenter="document.getElementById('paragraph').style.visibility= 'hidden'">Enter mouse pointer</button>

JavaScript on mouse enter event function

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

HTML
btn.onmouseenter = function(){
  paragraph.style.visibility = "hidden";
}

JavaScript on mouse enter event addEventListener

كتابة event جافا سكريبت داخل دالة addEventListener في جافا سكريبت.

HTML
btn.addEventListener("mouseenter", function() {
  paragraph.style.visibility = "hidden";
});

في لغة جافا سكريبت يمكن عند تمرير ثم الوقوف علي العنصر بمؤشر mouse في لغة جافا سكريبت يمكن تنفيذ أمر برمجي.

JavaScript on mouse leave attribute

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

HTML
<button class="btn" id="btn" onmouseleave="document.getElementById('paragraph').style.visibility= 'hidden'">Enter mouse pointer</button>

JavaScript on mouse leave event function

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

HTML
btn.onmouseleave = function(){
  paragraph.style.visibility = "hidden";
}

JavaScript on mouse leave event addEventListener

كتابة event جافا سكريبت داخل دالة addEventListener في جافا سكريبت.

HTML
btn.addEventListener("mouseleave", function() {
  paragraph.style.visibility = "hidden";
});

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…