জাভাস্ক্রিপ্ট দিয়ে কীভাবে একটি ওয়েবসাইটে (মাউসওভারে) পটভূমির রঙ টগল করবেন

জাভাস্ক্রিপ্টের mouseover ব্যবহার করে আপনি যখন কোনও ওয়েবসাইটে আপনার মাউসকে ভিতরে এবং বাইরে সরান তখন কীভাবে পটভূমির রঙ টগল করবেন তা শিখুন এবং mouseout ঘটনা।

HTML

এখানে একটি সাধারণ HTML পৃষ্ঠার জন্য কিছু মার্কআপ রয়েছে:

<!DOCTYPE html>
<html>
  <body>
    <h1>Move your move over this page</h1>
  </body>
</html>

আপনি এই টিউটোরিয়ালটি অনুসরণ করতে CodePen-এর মতো একটি বিনামূল্যের অনলাইন পাঠ্য সম্পাদক ব্যবহার করতে পারেন৷

৷

জাভাস্ক্রিপ্ট

ওয়েবসাইটের পটভূমির রঙ টগল করার জন্য যখন একজন ব্যবহারকারী তাদের মাউসকে ওয়েবসাইট ফ্রেমের বাইরে এবং বাইরে নিয়ে যায় তখন আপনাকে এটি করতে হবে:

<body> টার্গেট করুন উপাদান এবং একটি পরিবর্তনশীল মধ্যে এটির একটি রেফারেন্স সংরক্ষণ করুন।
window-এ ইভেন্ট শ্রোতাদের সেট আপ করুন বস্তু যা দুটি ইভেন্ট প্রকারের জন্য শোনে, mouseover , এবং mouseout
backgroundColor টগল করুন দুটি রঙের মান সহ সম্পত্তি।

শরীরের উপাদানের রেফারেন্স স্টোর করুন

প্রথমে আপনাকে আপনার ওয়েবসাইটের <body> একটি রেফারেন্স সংরক্ষণ করতে হবে উপাদান, যা একটি ওয়েব পৃষ্ঠার সমস্ত বিষয়বস্তু মোড়ানো হয়:

const bodyElement = document.querySelector("body")

"মাউসওভারে" ইভেন্ট সেট আপ করা হচ্ছে

এখন আসুন এমন একটি ইভেন্ট সেট আপ করি যা ব্যবহারকারী যখন তাদের মাউসকে একটি পৃষ্ঠার উপর নিয়ে যায় তখন তার জন্য শোনে এবং তারপরে একটি ফাংশন চালায় যা পটভূমির রঙ পুনরায় পরিবর্তন করে। আপনার জাভাস্ক্রিপ্ট ফাইলে নিম্নলিখিত কোড যোগ করুন:

const bodyElement = document.querySelector("body")

// New code
window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "red"
})

দারুণ, এটা কাজ করে!

"মাউসআউটে" ইভেন্ট সেট আপ করা হচ্ছে

তাহলে কীভাবে আমরা ব্যাকগ্রাউন্ডের রঙকে তার ডিফল্ট সাদাতে পরিবর্তন করব, যখন ব্যবহারকারী আবার তাদের মাউসকে ওয়েবসাইট ফ্রেমের বাইরে নিয়ে যায়?

আপনি উপরের থেকে উইন্ডো ইভেন্টটি কপি করতে পারেন এবং mouseover প্রতিস্থাপন করতে পারেন mouseout সহ , এবং backgroundColor "white" তে .

তাহলে আপনার কোড দেখতে এইরকম হবে:

const bodyElement = document.querySelector("body")

window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "red"
})

// New code
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)

আপনি দেখতে পাচ্ছেন, এটি আগের মতোই কাজ করে৷

রিফ্যাক্টরড উপরের কোডটি কিছুটা পরিষ্কার, এই অর্থে যে এটি নামবিহীন (বেনামী) ফাংশন ব্যবহার না করার সাধারণ জাভাস্ক্রিপ্ট নির্দেশিকা অনুসরণ করে৷

এই কোডটিও পুনরায় ব্যবহারযোগ্য৷ যেহেতু আপনি এখন দুজনকে নামে ডাকতে পারেন যে কোনো ধরনের ইভেন্ট শ্রোতা থেকে ফাংশন, যা অনেক পরিস্থিতিতে ব্যবহারিক।

কোড ডেমো দেখুন।

রঙের মানগুলির জন্য আপনি হয় প্রকৃত নাম ব্যবহার করতে পারেন (যেমন "লাল"), হেক্স অথবা rgba মান।