ব্রাউজারগুলোর বিভিন্ন ইভেন্টের জন্য ডিফল্ট ইন্টারঅ্যাকশন এবং আচরণ রয়েছে।
উদাহরণস্বরূপ, যখন একজন ব্যবহারকারী একটি ফর্মের "সাবমিট" বাটনে ক্লিক করে, ফর্মটি ডিফল্টভাবে একটি URL-এ সাবমিট হয়।
যখন একটি এলিমেন্টের চাইল্ডে ক্লিক করা হয়, ক্লিক ইভেন্টটি পেরেন্ট এলিমেন্টেও ঘটে কারণ সেটি প্রধান কন্টেইনার।
কিছু ক্ষেত্রে, আপনি এই ডিফল্টগুলো ওভাররাইড করতে চাইতে পারেন। এই আর্টিকেলে, আমরা শিখব event.preventDefault() এবং event.stopPropagation() মেথডগুলো কী এবং কীভাবে ব্রাউজারে ঘটা কিছু ডিফল্ট অ্যাকশন ক্যানسেল করতে এগুলো ব্যবহার করতে হয়।
event.preventDefault()
এই মেথডটি ব্রাউজার द्वारा একটি ইভেন্ট ট্রিগার হওয়ার সময় কिये जाने वाले ডিফল্ট অ্যাকশনগুলো বাধা দেয়।
ওয়েবপেজে কিছু ডিফল্ট অ্যাকশন এবং কীভাবে event.preventDefault() দিয়ে সেগুলো ওভাররাইড করতে হয় তার উদাহরণ নিচে দেওয়া হলো।
ডিফল্ট ফর্ম সাবমিশন ওভাররাইড করার পদ্ধতি
যখন একজন ব্যবহারকারী একটি ফর্ম সাবমিট করে (সাবমিট বাটনে ক্লিক করা হয়), ফর্মের ডিফল্ট অ্যাকশন হলো ফর্মের ডেটাকে একটি URL-এ সাবমিট করা যেটি ডেটা প্রসেস করে।
ফর্ম এলিমেন্টগুলোর action এবং method অ্যাট্রিবিউট থাকে যেগুলো ফর্ম সাবমিট করার URL এবং রিকোয়েস্টের টাইপ (get, post, ইত্যাদি) স্পেসিফাই করে।
যদি এই অ্যাট্রিবিউটগুলো প্রদান না করা হয়, ডিফল্ট URL হলো ফর্ম সাবমিট করা করেন্ট URL, এবং মেথড হলো get।
উদাহরণস্বরূপ, এই কোড:
<form> <input name="email" /> <input name="password" /> <input type="submit" /> </form> এই পেজটি তৈরি করে:
"dillion" এবং "password" ইনপুট দিয়ে ফর্ম সাবমিট করলে, আপনি একটি get রিকোয়েস্ট দেখবেন 127.0.0.1:5500/index.html-এ সাবমিট হয়েছে এমন:
এই অ্যাকশনটি ব্রাউজার ফর্ম হ্যান্ডল করে ডিফল্টভাবে।
তবে আপনি ডেটা পাঠানোর আগে আরও কিছু কাজ করতে চাইতে পারেন। আজকের ফর্ম হ্যান্ডলিং পদ্ধতিতে এটি খুব কমন।
আপনি ডেটা ভ্যালিডেশন, ডেটা চেক, প্রসেসিং, হেডার কনফিগারেশন, ইত্যাদি করতে চাইতে পারেন রিকোয়েস্ট URL-এ পাঠানোর আগে।
এই দৃশ্যমানগুলিতে, আপনি ফর্মের ডিফল্ট অ্যাকশন বাধা দিতে চাবেন। এখানে কীভাবে:
<form id='form'> ... </form> const form = document.getElementById('form') form.addEventListener('submit', (event) => { event.preventDefault() // ডেটা প্রসেস করুন এবং ম্যানুয়ালি রিকোয়েস্ট সাবমিট করুন }) এইভাবে, ফর্ম সাবমিশন আপনার হাতে থাকে।
লিংকে ক্লিক করার ডিফল্ট অ্যাকশন ওভাররাইড করার পদ্ধতি
যখন আপনি একটি লিংকে ক্লিক করেন (একটি অ্যাঙ্কর ট্যাগ a যেটির href অ্যাট্রিবিউট আছে), ডিফল্ট অ্যাকশন হলো ব্রাউজারের নেভিগেশন ক্লিক করা লিংকটি।
কি হবে যদি আপনি সেই অ্যাকশনকে ইন্টারসেপ্ট করতে চান এবং নেভিগেশনের আগে কিছু করতে চান? উদাহরণস্বরূপ, চেক করা যে ব্যবহারকারীর পেজটি অ্যাক্সেস করার অ্যাক্সেস আছে কিনা। এখানে কীভাবে করবেন:
<a id="link" href="https://google.com">Google</a> const link = document.getElementById("link") link.addEventListener("click", event => { event.preventDefault() // কিছু করুন এবং নেভিগেট করুন }) আপনি এটি টেস্ট করতে পারেন। "Google" লিংকে ক্লিক করলে কোনো নেভিগেশন ঘটবে না — কারণ আপনি ডিফল্ট নেভিগেশন অ্যাকশন বাধা দিয়েছেন। এখন, আপনাকে নিজে নেভিগেশন হ্যান্ডেল করতে হবে।
event.stopPropagation()
প্রোপেগেশন হলো কিছু ছড়িয়ে দেওয়ার কাজ, এই কেসে, ইভেন্ট। stopPropagation মেথডটি একটি ইভেন্ট ট্রিগার হওয়ার সময় ইভেন্ট ছড়িয়ে যাওয়া বাধা দিতে ব্যবহৃত হয়।
জাভাস্ক্রিপ্টে, যখন আপনি একটি এলিমেন্টে একটি ইভেন্ট ট্রিগার করেন, সেটি ট্রিয়ের উপরে বাবলে আপ পেরেন্ট এবং আনসেস্টরগুলোর দিকে। মূলত, ইভেন্টযে এলিমেন্টটি পেরেন্টের কন্টেইনারের ভিতরে আছে, তাই পেরেন্টটিও ইভেন্টগুলো রিসিভ করে।
এটি ভালোভাবে বোঝাতে, আমি একটি উদাহরণ ব্যবহার করব।
একটি এলিমেন্টের চাইল্ডে ক্লিক করা
ধরুন আপনার নিচের এলিমেন্টগুলো আছে:
<div> <button>Click me</button> </div> যখন আপনি button-এ ক্লিক করেন, আপনি div কন্টেইনারটিও ক্লিক করছেন কারণ বাটনটি কন্টেইনারের ভিতরে আছে। এই লজিক মানে ক্লিক ইভেন্ট বাটন থেকে কন্টেইনারে প্রোপেগেট হয়, এবং ইভেন্ট সব গ্র্যান্ডপেরেন্ট পর্যন্ত ছড়িয়ে যায় যতক্ষণ না রুটে পৌঁছায়।
এটি যাচাই করতে, আমি এই কোড দিয়ে ব্যাখ্যা করব কীভাবে এটি কাজ করে:
<div id="div"> <button id="button">Click me</button> </div> const div = document.getElementById('div') const button = document.getElementById('button') button.addEventListener('click', () => { console.log('button clicked') }) div.addEventListener('click', () => { console.log('div container clicked') }) আপনি যখন আপনার ব্রাউজারে এটি রান করবেন এবং বাটনে ক্লিক করবেন, আপনি এই রেজাল্ট পাবেন:
div কন্টেইনারটিও ক্লিক ইভেন্ট রিসিভ করে, তাই ক্লিক কলব্যাক ফাংশনটিও কল হয়।
ইভেন্ট প্রোপেগেশন ইভেন্ট এবং এলিমেন্টের ডিফল্ট বিহেভিয়ার, কিন্তু কিছু কেসে আপনি কিছু বিহেভিয়ার চাইতে পারেন না। অনেক উদাহরণের মধ্যে, একটা এখানে।
এখানে Gmail-এর New Message পপআপ:
শীর্ষে, আপনার তিনটি অ্যাকশন বাটন আছে। একটি পপআপ মিনিমাইজ করে, একটি পপআপ ফুলস্ক্রিন করে, এবং একটি পপআপ বন্ধ করে।
তবে শীর্ষের বারটি, যেখানে "New Message" টেক্সট আছে, সেটির ওপরেও একটি ক্লিক হ্যান্ডলার আছে, যাতে সেটিতে ক্লিক করলে পপআপ মিনিমাইজ হয়:
এখানে আপনি এড়াতে চান যে, যেকোনো বাটনে ক্লিক করলে, আপনি চান না ক্লিক ইভেন্ট প্রোপেগেট হয় শীর্ষ বারের দিকে এবং সেটির ইভেন্টের ফাংশনটিও এক্সিকিউট হয়। আমার মানে হলো, ক্লোজ বাটনে ক্লিক করলে, উদাহরণস্বরূপ, আপনি চান না শীর্ষ বারটিও মিনিমাইজ হয়।
এই ধরনের কেসে, আপনি প্রোপেগেশন বন্ধ করতে চান।
ধরুন পপআপটি এভাবে বিল্ট:
<div id='top-bar'> <!-- The Message Element --> <!-- The Buttons --> </div> const topBar = document.getElementById('top-bar') const closeButton = document.getElementById('close-btn') topBar.addEventListener('click', () => { // minimize or maximize popup }) closeButton.addEventListener('click', () => { // close popup }) আপনি বাটনের লিসেনারের সাথে stopPropagation মেথডও যোগ করতে চান, যাতে ইভেন্ট শীর্ষ বারের দিকে ছড়িয়ে না যায়। এটি করতে, আপনি বাটনের লিসেনারটি আপডেট করবেন:
closeButton.addEventListener('click', (event) => { event.stopPropagation() // close popup }) এটি inplace থাকলে, শীর্ষ বারটি ক্লিক ইভেন্ট শুধু তখন রিসিভ করবে যখন সেটি সরাসরি ক্লিক করা হবে।
র্যাপিং আপ
event.preventDefault() এবং event.stopPropagation()-এর পার্থক্য হলো پہলেটি ব্রাউজার দ্বারা কिये गये ডিফল্ট অ্যাকশন বাধা দেয়, যখন দ্বিতীয়টি ইভেন্টের ডিফল্ট বিহেভিয়ার — ট্রিয়ের উপরে প্রোপেগেট হওয়া বাধা দেয়।
এই ডিফল্ট অ্যাকশন এবং বিহেভিয়ারগুলো মিসটেক নয়, এবং আপনি কোডিং করার সময় এগুলো সম্পর্কে চিন্তা করতে হবে না। কিন্তু কিছু সিনেরিও আছে যেখানে আপনি সেগুলো ওভাররাইড করতে চান, যেমন আমরা এই আর্টিকেলের উদাহরণগুলিতে দেখেছি।
