HTML DOM MouseEvent relatedTarget প্রপার্টি

HTML DOM MouseEvent relatedTarget প্রপার্টি মাউসওভার বা মাউসআউট ইভেন্ট ট্রিগারকারী সংশ্লিষ্ট এলিমেন্ট রিটার্ন করে।

সিনট্যাক্স

relatedTarget অবজেক্ট রেফারেন্স রিটার্ন করার জন্য:

MouseEventObject.relatedTarget

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>MouseEvent relatedTarget</title>
<style>
  * { padding: 2px; margin: 5px; }
  form { width: 70%; margin: 0 auto; text-align: center; }
  #outer { width: 70%; margin: 0 auto; padding: 0; text-align: center; border: 1px solid black; height: 105px; background-color: #28a745; }
  input[type="button"] { border-radius: 10px; }
  #upper { border-bottom: 1px solid black; height: 40px; margin: 0 0 15px 0; background-color: #DC3545; }
  #lower { border-top: 1px solid black; height: 40px; margin: 15px 0 0 0; background-color: #DC3545; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>MouseEvent-relatedTarget</legend>
      <div id="outer" onmouseout="gameStart(event)">
        <div id="upper"><h2>Danger</h2></div>
        <div id="lower"><h2>Danger</h2></div>
      </div>
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function gameStart(event) {
      var fetchedID = event.relatedTarget.id;
      if(fetchedID !== '') divDisplay.textContent = 'You are hovering over ' + fetchedID + ' <div> element';
    }
  </script>
</body>
</html>

আউটপুট

সবুজ (নিরাপদ) এলাকায় হোভার করলে - "You are hovering over outer <div> element"।

উপরের লাল (বিপদ) এলাকায় হোভার করলে - "You are hovering over upper <div> element"।

নিচের লাল (বিপদ) এলাকায় হোভার করলে - "You are hovering over lower <div> element"।