HTML DOM UiEvent অবজেক্ট একটি ইভেন্টকে প্রতিনিধিত্ব করে যা ব্যবহারকারীর HTML এলিমেন্টের সাথে ইন্টারঅ্যাকশনের সময় ঘটে।
এখানে "UiEvent" নিম্নলিখিত প্রপার্টি এবং মেথড গুলো 가질 수 있습니다:
| প্রপার্টি/মেথড | বিবরণ |
|---|---|
| detail | ইভেন্ট সম্পর্কে বিস্তারিত নম্বর রিটার্ন করে |
| view | ইভেন্ট ঘটার উইন্ডো অবজেক্টের রেফারেন্স রিটার্ন করে |
উদাহরণ: Event detail প্রপার্টি
<!DOCTYPE html> <html> <head> <title>HTML DOM UiEvent detail</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #playArea { display: inline-block; border-radius: 50%; background-color: #DC3545; width: 50px; height: 50px; border: 3px solid #AC3509; } #clickOn { border: 3px solid #F0FF33; margin: 15px auto; border-radius: 50%; background-color: #FFF933; width: 10px; height: 10px; } h2 { display: inline-block; } </style> </head> <body> <form> <fieldset> <legend>HTML-DOM-UiEvent-detail</legend> <h2 id="highScore">High Score: 0</h2> <h2 id="currScore">Current Score: 0</h2><br> <div id="playArea"><div onclick="getHighScore(event)" id="clickOn"></div></div><br> </fieldset> </form> <script> var clickOn = document.getElementById("clickOn"); var playDisplay = document.getElementById("playArea"); var highScore = document.getElementById("highScore"); var currScore = document.getElementById("currScore"); var high = 0, score = 0; function getHighScore(event) { var score = event.detail; currScore.textContent = 'Current Score: '+score; if(score > high){ highScore.textContent = 'High Score: '+score; high = score; } } </script> </body> </html>
আউটপুট
ইয়ালো ডিভ এলিমেন্টে ক্লিক করার আগে:
ইয়ালো ডিভ এলিমেন্টে ধারাবাহিক ক্লিক করার পর:
ইয়ালো ডিভ এলিমেন্টে ধারাবাহিক ক্লিক করা কিন্তু আগের চেয়ে কম:
