JavaScript-এর mouseover এবং mouseout ইভেন্ট ব্যবহার করে ওয়েবসাইটের ব্যাকগ্রাউন্ড কালার টগল করার পদ্ধতি শিখুন যখন আপনি আপনার মাউস ওয়েবসাইটের ভিতরে এবং বাইরে নেবেন।
HTML
এখানে একটি সিম্পল HTML পেজের মার্কআপ:
<!DOCTYPE html> <html> <body> <h1>Move your move over this page</h1> </body> </html>আপনি CodePen-এর মতো ফ্রি অনলাইন টেক্সট এডিটর ব্যবহার করে এই টিউটোরিয়াল ফলো করতে পারেন।
JavaScript
ওয়েবসাইটের ব্যাকগ্রাউন্ড কালার টগল করতে যখন ইউজার তাদের মাউস পেজের ওপর এবং বাইরে নেবে, আপনাকে করতে হবে:
<body>এলিমেন্ট টার্গেট করুন এবং একটি রেফারেন্স একটি ভেরিয়েবলে স্টোর করুন।windowঅবজেক্টে ইভেন্ট লিসেনার সেট আপ করুন যা দুটি ইভেন্ট টাইপ লিসেন করবে,mouseover, এবংmouseout।backgroundColorপ্রোপার্টি দুটি কালার ভ্যালু দিয়ে টগল করুন।
body এলিমেন্টের রেফারেন্স স্টোর করুন
প্রথমে আপনার ওয়েবসাইটের <body> এলিমেন্টের একটি রেফারেন্স স্টোর করতে হবে, যা একটি ওয়েব পেজের সকল কন্টেন্ট র্যাপ করে:
const bodyElement = document.querySelector("body")"on mouseover" ইভেন্ট সেট আপ করুন
এখন একটি ইভেন্ট সেট আপ করি যা লিসেন করবে যখন ইউজার তাদের মাউস পেজের ওপর নেবে, এবং একটি ফাংশন এক্সিকিউট করবে যা ব্যাকগ্রাউন্ড কালার লাল করবে। আপনার JavaScript ফাইলে নিচের কোডটি যোগ করুন:
const bodyElement = document.querySelector("body") // নতুন কোড window.addEventListener("mouseover", function() { bodyElement.style.backgroundColor = "red" })বাড়িয়ালো, এটি কাজ করছে!
"on mouseout" ইভেন্ট সেট আপ করুন
তো আমরা ব্যাকগ্রাউন্ড কালার আবার ডিফল্ট সাদায় কীভাবে ফিরিয়ে আনব, যখন ইউজার তাদের মাউস ওয়েবসাইট ফ্রেমের বাইরে আবার নেবে?
আপনি শুধু উপরের উইন্ডো ইভেন্টটি কপি করতে পারেন, এবং mouseover-কে mouseout দিয়ে রিপ্লেস করুন, এবং backgroundColor-কে "white" দিয়ে।
তখন আপনার কোডটি নিচের মতো দেখাবে:
const bodyElement = document.querySelector("body") window.addEventListener("mouseover", function() { bodyElement.style.backgroundColor = "red" }) // নতুন কোড window.addEventListener("mouseover", function() { bodyElement.style.backgroundColor = "white" })এটি কাজ করছে!
কিন্তু কি এটি এই সমস্যা সমাধানের সেরা পদ্ধতি?
দুর্ভাগ্যবশত, আমরা নहीं একাধিক ইভেন্ট একটি সিঙ্গল ইভেন্ট লিসেনারে যোগ করতে পারি (jQuery-এর মত), যা কোডকে কম রিডান্ডান্ট করত।
তবে, আমরা বদলে দুটি নামকৃত ফাংশন সেট আপ করতে পারি এবং প্রতিটিকে একটি উইন্ডো ইভেন্ট লিসেনারে পাস করতে পারি, নিচের মতো:
const bodyElement = document.querySelector("body") function mouseOver() { bodyElement.style.backgroundColor = "red" } function mouseOut() { bodyElement.style.backgroundColor = "white" } window.addEventListener("mouseover", mouseOver) window.addEventListener("mouseout", mouseOut)যে प्रकारে দেখতে পাচ্ছেন, এটি আগের মতোই কাজ করছে।
উপরের রিফ্যাক্টরড কোডটি কিছুটা ক্লিনার, যেহেতু এটি জেনারেল JavaScript গাইডলাইন ফলো করে আনোনিমাস (অনামিক) ফাংশন ব্যবহার না করে।
এই কোডটিও রিইউজেবল কারণ আপনি এখন দুটি নামকৃত ফাংশন যেকোনো টাইপের ইভেন্ট লিসেনার থেকে কল করতে পারেন, যা অনেক পরিস্থিতিতে প্র্যাক্টিক্যাল।
কোড ডেমো চেক করুন।
কালার ভ্যালু হিসেবে আপনি রিয়েল নাম (যেমন "red"), hex বা rgba ভ্যালু ব্যবহার করতে পারেন।
