HTML DOM MouseEvent অবজেক্ট

HTML DOM MouseEvent অবজেক্ট মাউসের HTML ডকুমেন্ট এলিমেন্টের সাথে ইন্টারঅ্যাকশনের সময় ঘটা একটি ইভেন্টকে প্রতিনিধিত্ব করে।

MouseEvent প্রপার্টি এবং মেথড

MouseEvent clientX প্রপার্টির উদাহরণ

(এখানে clientX উদাহরণটি উপরের артиকেলের মতোই, সংক্ষিপ্ত করা হলো)

MouseEvent ইভেন্টের তালিকা

MouseEvent onmouseout ইভেন্টের উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>MouseEvent onmouseout</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-onmouseout</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"।