কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্টে টাচ ইভেন্ট ব্যাখ্যা

টাচ ইভেন্টস কী?

জাভাস্ক্রিপ্টে টাচ ইভেন্টগুলো টাচস্ক্রিন ডিভাইসে ইউজার ইন্টারঅ্যাকশন হলে ফায়ার হয়। মোবাইল এবং ট্যাবলেট ডিভাইসের জন্য এটি অত্যন্ত গুরুত্বপূর্ণ।

প্রধান টাচ ইভেন্টস

ইভেন্টবিবরণ
touchstartটাচ পয়েন্ট টাচ সারফেসে রাখা হলে ফায়ার হয়
touchmoveটাচ পয়েন্ট টাচ সারফেসে সরানো হলে ফায়ার হয়
touchendটাচ পয়েন্ট টাচ সারফেস থেকে সরানো হলে ফায়ার হয়
touchcancelটাচ পয়েন্ট বাধা পেলে ফায়ার হয়

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .result, .sample { font-size: 18px; color: blueviolet; font-weight: 500; }
        .sample { color: red; }
    </style>
</head>
<body>
    <h1>জাভাস্ক্রিপ্টে টাচ ইভেন্টস</h1>
    <div class="sample">টাচ করার জন্য নমুনা টেক্সট</div>
    <div class="result"></div>
    <h3>উপরোক্ত প্যারাগ্রাফে টাচ করুন</h3>
    <script>
        let resEle = document.querySelector(".result");
        let sampleEle = document.querySelector(".sample");
        sampleEle.addEventListener("touchstart", () => {
            resEle.innerHTML = "Touch start ইভেন্ট ট্রিগার হয়েছে";
        });
    </script>
</body>
</html>

আউটপুট

টাচস্ক্রিন ডিভাইসে প্যারাগ্রাফে টাচ করলে "Touch start ইভেন্ট ট্রিগার হয়েছে" মেসেজটি প্রদর্শিত হবে।

  1. জাভাস্ক্রিপ্টে নেটিভ প্রোটোটাইপ ব্যাখ্যা

  2. জাভাস্ক্রিপ্টে শর্টহ্যান্ড (Arrow) ফাংশন ব্যাখ্যা

  3. জাভাস্ক্রিপ্টে for...in স্টেটমেন্ট ব্যাখ্যা

  4. জাভাস্ক্রিপ্টে অবজেক্ট সমতা ব্যাখ্যা