٧.٧ الأحداث — الجزء الأول

سنستخدم مستند HTML التالي في هذا الدرس:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Our Website</title>
    <style>
       section{
         margin: 2rem 0;
         padding: 2rem 0;
         border-bottom: 0.3rem solid CadetBlue;
       }
       #container{
         display: flex;
         justify-content: center;
       }
       .box{
         width: 10rem;
         height: 10rem;
         margin: 1rem;
       }
       #box-1{
         background: lightblue;
       }
       #box-2{
         background: Olive;
       }
       #box-3{
         background: tomato;
       }
       #form{

       }
       #form input, #colorSelect{
         display: block;
         margin: 1rem 0;
         width: 20rem;
         height: 2rem;
         border: none;
         outline: none;
         border-bottom: 0.1rem solid tomato;
         font-size: 1.5rem;
       }
       input[type="submit"]{
         background: tomato;
         color: #fff;
       }
       input[type="submit"]:hover{
         opacity: 0.8;
         cursor: pointer;
       }
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to our website</h1>
    </header>
    <section id="container">
      <div class="box" id="box-1"></div>
      <div class="box" id="box-2"></div>
      <div class="box" id="box-3"></div>
    </section>
    <section id="formSection">
      <form id="form">
        <input type="text" id="yourName" placeholder="Your Name">
        <input type="number" id="age" placeholder="35">
        <select name="selectMenu" id="colorSelect">
          <option value="DarkSlateGray">DarkSlateGray</option>
          <option value="SaddleBrown">SaddleBrown</option>
          <option value="Yellow">Yellow</option>
          <option value="CadetBlue">CadetBlue</option>
          <option value="Chocolate">Chocolate</option>
          <option value="CornflowerBlue">CornflowerBlue</option>
          <option value="Gainsboro">Gainsboro</option>
          <option value="LemonChiffon">LemonChiffon</option>
          <option value="SteelBlue">SteelBlue</option>
          <option value="Snow">Snow</option>
          <option value="SpringGreen">SpringGreen</option>
        </select>
        <input type="submit" value="Send">
      </form>
    </section>
    <section id="answers">
      <h2>Your answers will be shown here:</h2>
      <p id="yourName"></p>
      <p id="yourAge"></p>
      <p id="yourColor"></p>
    </section>
    <script src="script.js"></script>
  </body>
</html>

الحدثان mouseover وmouseout

التمرين 1: اختر الصندوق الأول.

let el = document.getElementById("box-1");

console.log(el);

النتيجة هي: <div class="box" id="box-1"></div>

التمرين 2: غيّر لون الصندوق الأول إلى Chocolate.

let el = document.getElementById("box-1");
el.style.backgroundColor = "Chocolate";

التمرين 3: أنشئ دالة تغيّر خلفية عنصر إلى Chocolate.

function changeBackground(el){
  el.style.backgroundColor = "Chocolate";
}

التمرين 4: يتغيّر لون خلفية الصندوق الأول إلى Chocolate عندما يدخل مؤشر الفأرة إليه. تأمّل الشيفرة التالية.

let el = document.getElementById("box-1");
el.onmouseover = function(){
  el.style.backgroundColor = "Chocolate";
}

onmouseover

العامل mouseover يحدث عند دخول مؤشر الفأرة إلى العنصر.

التمرين 5: يتغيّر لون خلفية الصندوق الأول إلى DarkSlateGray عندما يغادر مؤشر الفأرة الصندوق. تأمّل الشيفرة التالية.

let el = document.getElementById("box-1");
el.onmouseover = function(){
  el.style.backgroundColor = "Chocolate";
}
el.onmouseout = function(){
  el.style.backgroundColor = "DarkSlateGray";
}

onmouseout

العامل mouseout يحدث عند خروج مؤشر الفأرة من العنصر.

التمرين 6: عند دخول المؤشر إلى الصندوق الثاني، غيّر حدوده إلى black 2rem، وعند خروجه غيّرها إلى black 0.5rem.

let el = document.getElementById("box-2");
el.onmouseover = function(){
  el.style.border = "2rem solid black";
}
el.onmouseout = function(){
  el.style.border = "0.5rem solid black";
}

التمرين 7: عند دخول المؤشر إلى الصندوق الثالث، غيّر حدوده إلى 0.5rem Gainsboro، وعند خروجه غيّرها إلى 1rem Gainsboroوخلفيته إلى SpringGreen.

let el = document.getElementById("box-3");
el.onmouseover = function(){
  el.style.border = "0.5rem Gainsboro solid";
}
el.onmouseout = function(){
  el.style.border = "1rem Gainsboro solid";
  el.style.backgroundColor = "SpringGreen";
}

التمرين 8: ارجع إلى التمرين 7؛ أبقِ لون الخلفية tomato عند دخول مؤشر الفأرة إلى الصندوق.

let el = document.getElementById("box-3");
el.onmouseover = function(){
  el.style.border = "0.5rem Gainsboro solid";
  el.style.backgroundColor = "tomato";
}
el.onmouseout = function(){
  el.style.border = "1rem Gainsboro solid";
  el.style.backgroundColor = "SpringGreen";
}

التمرين 9: عند دخول المؤشر إلى زر submit ، غيّر خلفيته إلى gray، وعند مغادرته غيّر الخلفية إلى tomato.

let el = document.querySelector('#form input[type="submit"]');
el.onmouseover = function(){
  el.style.backgroundColor = "gray";
}
el.onmouseout = function(){
  el.style.backgroundColor = "tomato";
}

التمرين 10: عند دخول المؤشر إلى قسم #answers ، غيّر حجم خط h2 على 2rem، وعند مغادرته غيّر حجم خط h2 على 1rem.

let el = document.querySelector('#answers h2');
el.onmouseover = function(){
  el.style.fontSize = "2rem";
}
el.onmouseout = function(){
  el.style.fontSize = "1rem";
}

---

الحدث change

التمرين 11: عند إدخال المستخدم اسمه، تتغيّر خلفية حقل الإدخال إلى gray. تأمّل الشيفرة التالية.

let el = document.querySelector(`#form #yourName`);

el.onchange = function(){
  el.style.backgroundColor = "gray";
}

التمرين 12: عند إدخال المستخدم عمره، تتغيّر خلفية حقل الإدخال إلى LemonChiffon.

let el = document.querySelector(`#form #yourAge`);

el.onchange = function(){
  el.style.backgroundColor = "LemonChiffon";
}

التمرين 13: عند اختيار المستخدم لونه المفضّل، اجعل خلفية قائمة الاختيار باللون نفسه. تلميح: استخدم el.value لجلب القيمة المختارة.

let el = document.querySelector(`#form #colorSelect`);

el.onchange = function(){
  let colorValue = el.value;
  el.style.backgroundColor = colorValue;
}

الحدث change

العامل onchange يحدث عند اعتماد تغيير قيمة الحقل؛ وفي الحقول النصية يكون عادةً بعد مغادرة الحقل.

el.value

العامل el.value تُرجع قيمة عنصر إدخال.

---

كائن الحدث

التمرين 14: ادرس المثال التالي.

let el = document.querySelector(`#form #colorSelect`);

el.onchange = function(eventObject){
  eventObject.preventDefault();
  console.log(eventObject)
}

النتيجة هي: Event {isTrusted: true, type: "change", target: select#colorSelect, currentTarget: select#colorSelect, eventPhase: 2, …}

كائن الحدث

عند وقوع حدث يُمرَّر كائن يحمل معلوماته إلى دالة المعالجة. غالبًا نُسمّي معامله e.

e.preventDefault()

العامل e.preventDefault() تمنع السلوك الافتراضي للحدث القابل للإلغاء، مثل إرسال النموذج أو اتباع رابط عند النقر.

التمرين 15: ارجع إلى التمرين 14؛ ما نوع الحدث الذي وقع؟ تلميح: استخدم eventObject.type.

let el = document.querySelector(`#form #colorSelect`);

el.onchange = function(eventObject){
  eventObject.preventDefault();
  console.log(eventObject.type);
}

النتيجة هي: change

التمرين 16: ارجع إلى التمرين 14؛ ما نوع الحدث الذي وقع؟ تلميح: استخدم eventObject.target.

let el = document.querySelector(`#form #colorSelect`);

el.onchange = function(eventObject){
  eventObject.preventDefault();
  console.log(eventObject.target);
}

النتيجة هي: <select name="selectMenu" id="colorSelect"></select>

---

الحدث click

التمرين 17: ينقر المستخدم زر send ، فتتغيّر خلفية النموذج إلى gray. ادرس المثال التالي.

let button = document.querySelector('#form input[type="submit"]');
let form = document.querySelector('#form');

button.onclick = function(e){
  e.preventDefault();
  form.style.backgroundColor = "gray";  
}

الحدث click

العامل onclick يحدث عند نقر المستخدم العنصر المحدّد.

التمرين 18: يُدخل المستخدم اسمه وينقر زر send ، فيُضاف الاسم إلى فقرة #answers #yourName .

let button = document.querySelector('#form input[type="submit"]');
let userName = document.querySelector('#form > #yourName');
let nameParagraph = document.querySelector('#answers #yourName');

button.onclick = function(e){
  e.preventDefault();
  let name = userName.value;
  nameParagraph.appendChild(document.createTextNode(name));
}

التمرين 19: ارجع إلى التمرين 18؛ يُدخل المستخدم عمره أيضًا وينقر زر send ، فيُضاف العمر إلى فقرة #answers #yourAge .

let button = document.querySelector('#form input[type="submit"]');

let userName = document.querySelector('#form > #yourName');
let nameParagraph = document.querySelector('#answers #yourName');

let userAge = document.querySelector('#form > #age');
let ageParagraph = document.querySelector('#answers #yourAge');

button.onclick = function(e){
  e.preventDefault();
  let name = userName.value;
  nameParagraph.appendChild(document.createTextNode(name));
  let age = userAge.value;
  ageParagraph.appendChild(document.createTextNode(age));
}

التمرين 20: ارجع إلى التمرين 19؛ يختار المستخدم لونًا وينقر زر send ، فيُضاف اللون إلى فقرة #answers #yourColor .

let button = document.querySelector('#form input[type="submit"]');

let userName = document.querySelector('#form > #yourName');
let nameParagraph = document.querySelector('#answers #yourName');

let userAge = document.querySelector('#form > #age');
let ageParagraph = document.querySelector('#answers #yourAge');

let userColor = document.querySelector('#form > #colorSelect');
let colorParagraph = document.querySelector('#answers #yourColor');

button.onclick = function(e){
  e.preventDefault();
  let name = userName.value;
  nameParagraph.appendChild(document.createTextNode(name));
  let age = userAge.value;
  ageParagraph.appendChild(document.createTextNode(age));
  let color = userColor.value;
  colorParagraph.appendChild(document.createTextNode(color));
}

التمرين 21: ارجع إلى التمرين 20؛ عند نقر زر send أكثر من مرة تتراكم المدخلات. امسح المحتوى القديم قبل إضافة المحتوى الجديد إلى الفقرة المناسبة.

let button = document.querySelector('#form input[type="submit"]');

let userName = document.querySelector('#form > #yourName');
let nameParagraph = document.querySelector('#answers #yourName');

let userAge = document.querySelector('#form > #age');
let ageParagraph = document.querySelector('#answers #yourAge');

let userColor = document.querySelector('#form > #colorSelect');
let colorParagraph = document.querySelector('#answers #yourColor');

button.onclick = function(e){
  e.preventDefault();
  let name = userName.value;
  nameParagraph.textContent = "";
  nameParagraph.appendChild(document.createTextNode(name));
  let age = userAge.value;
  ageParagraph.textContent = "";
  ageParagraph.appendChild(document.createTextNode(age));
  let color = userColor.value;
  colorParagraph.textContent = "";
  colorParagraph.appendChild(document.createTextNode(color));
}

التمرين 22: ارجع إلى التمرين 21؛ إذا لم يُدخل المستخدم قيمة، فأضف "no input for this field".

let button = document.querySelector('#form input[type="submit"]');

let userName = document.querySelector('#form > #yourName');
let nameParagraph = document.querySelector('#answers #yourName');

let userAge = document.querySelector('#form > #age');
let ageParagraph = document.querySelector('#answers #yourAge');

let userColor = document.querySelector('#form > #colorSelect');
let colorParagraph = document.querySelector('#answers #yourColor');

let inputNotProvidedSentence = "No input for this field";

button.onclick = function(e){
  e.preventDefault();
  let name = userName.value || inputNotProvidedSentence;
  nameParagraph.textContent = "";
  nameParagraph.appendChild(document.createTextNode(name));
  let age = userAge.value || inputNotProvidedSentence;
  ageParagraph.textContent = "";
  ageParagraph.appendChild(document.createTextNode(age));
  let color = userColor.value || inputNotProvidedSentence;
  colorParagraph.textContent = "";
  colorParagraph.appendChild(document.createTextNode(color));
}

---

كائن الحدث مرة أخرى

التمرين 23: اطبع كائن حدث النقر على الزر.

let button = document.querySelector('#form input[type="submit"]');

button.onclick = function(e){
  e.preventDefault();
  console.log(e);
}

النتيجة هي: MouseEvent {isTrusted: true, screenX: 1372, screenY: 245, clientX: 168, clientY: 165, …}

التمرين 24: ارجع إلى التمرين 23؛ ما العنصر المستهدف بالحدث؟

let button = document.querySelector('#form input[type="submit"]');

button.onclick = function(e){
  e.preventDefault();
  console.log(e.target);
}

النتيجة هي: <input type="submit" value="Send">

التمرين 25: ارجع إلى التمرين 23؛ هل المفتاح altKey مضغوط عند وقوع الحدث؟ تلميح: استخدم e.altKey

let button = document.querySelector('#form input[type="submit"]');

button.onclick = function(e){
  e.preventDefault();
  console.log(e.altKey);
}

النتيجة هي: false

التمرين 26: ارجع إلى التمرين 23؛ ما مسار انتشار الحدث؟ تلميح: استخدم e.path

let button = document.querySelector('#form input[type="submit"]');

button.onclick = function(e){
  e.preventDefault();
  console.log(e.path);
}

النتيجة هي: (7) [input, form#form, section#formSection, body, html, document, Window]

التمرين 27: ارجع إلى التمرين 23؛ أين وقع النقر في الصفحة؟ تلميح: استخدم e.clientX و e.clientY

let button = document.querySelector('#form input[type="submit"]');

button.onclick = function(e){
  e.preventDefault();
  console.log(e.clientX, e.clientY);
}

النتيجة هي: 217 568

التمرين 28: ارجع إلى التمرين 23؛ أين وقع النقر بالنسبة إلى الزر؟ تلميح: استخدم e.offsetX و e.offsetY

let button = document.querySelector('#form input[type="submit"]');

button.onclick = function(e){
  e.preventDefault();
  console.log(e.offsetX, e.offsetY);
}

النتيجة هي: 179 19

أين وقع الحدث؟

العامل event.clientX تُرجع الموضع الأفقي للمؤشر بالنسبة إلى نافذة العرض الحالية.

العامل event.clientY تُرجع الموضع الرأسي للمؤشر بالنسبة إلى نافذة العرض الحالية.

العامل event.offsetX تُرجع الموضع الأفقي للمؤشر بالنسبة إلى حافة الحشوة للعنصر المستهدف.

العامل event.offsetY تُرجع الموضع الرأسي للمؤشر بالنسبة إلى حافة الحشوة للعنصر المستهدف.