বিভিন্ন ইভেন্টের জন্য ব্রাউজারগুলির ডিফল্ট মিথস্ক্রিয়া এবং আচরণ রয়েছে৷
উদাহরণস্বরূপ, যখন একজন ব্যবহারকারী একটি ফর্মের একটি "জমা দিন" বোতামে ক্লিক করেন, তখন ফর্মটি ডিফল্টরূপে একটি 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>
এই পৃষ্ঠাটি তৈরি করে:
ইনপুট "ডিলিয়ন" এবং "পাসওয়ার্ড" সহ ফর্ম জমা দেওয়ার পরে, আপনি একটি get দেখতে পাবেন 127.0.0.1:5500/index.html এ অনুরোধ জমা দেওয়া হয়েছে এই মত:
এই ক্রিয়াটি ব্রাউজারগুলি ডিফল্টরূপে ফর্মগুলি পরিচালনা করে৷
কিন্তু আপনি একটি অনুরোধ পাঠানোর আগে ডেটাতে আরও কিছু করতে চাইতে পারেন। এটি বিশেষ করে ফর্ম পরিচালনার আজকের পদ্ধতিতে সাধারণ।
একটি URL-এ অনুরোধ পাঠানোর আগে আপনি কিছু ডেটা যাচাইকরণ, ডেটা পরীক্ষা, প্রক্রিয়াকরণ, হেডার কনফিগারিং এবং আরও অনেক কিছু করতে চাইতে পারেন৷
এই পরিস্থিতিতে, আপনি ফর্মের ডিফল্ট ক্রিয়া প্রতিরোধ করতে চাইবেন৷ এখানে কিভাবে:
<form id='form'>
...
</form>
const form = document.getElementById('form')
form.addEventListener('submit', (event) => {
event.preventDefault()
// process data and submit a request manually
})
এইভাবে, ফর্ম জমা দেওয়া আপনার হাতে।
একটি লিঙ্কে ক্লিক করার সময় ডিফল্ট অ্যাকশন কীভাবে ওভাররাইড করবেন
আপনি যখন একটি লিঙ্কে ক্লিক করেন (একটি অ্যাঙ্কর ট্যাগ a একটি href সহ অ্যাট্রিবিউট), ডিফল্ট অ্যাকশন হল ব্রাউজারে ক্লিক করা লিঙ্কে একটি নেভিগেশন।
আপনি যদি সেই ক্রিয়াকে বাধা দিতে চান এবং নেভিগেশনের আগে কিছু করতে চান? উদাহরণস্বরূপ, ব্যবহারকারীর যে পৃষ্ঠাটিতে তারা নেভিগেট করতে চায় সেটিতে অ্যাক্সেস আছে কিনা তা পরীক্ষা করা। আপনি এটি কীভাবে করবেন তা এখানে:
<a id="link" href="https://google.com">Google</a>
const link = document.getElementById("link")
link.addEventListener("click", event => {
event.preventDefault()
// do something and navigate
})
আপনি এটা পরীক্ষা করতে পারেন. আপনি যখন "গুগল" লিঙ্কে ক্লিক করেন, তখন কোনো নেভিগেশন ঘটে না - কারণ আপনি ডিফল্ট নেভিগেশন অ্যাকশন আটকেছেন। এখন, আপনাকে নিজেই নেভিগেশন পরিচালনা করতে হবে।
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 নতুন বার্তা পপআপ:
শীর্ষে, আপনার কাছে তিনটি অ্যাকশন বোতাম রয়েছে। একটি পপআপ ছোট করে, একটি পপআপকে পূর্ণস্ক্রীন করে, এবং একটি পপআপ বন্ধ করে৷
কিন্তু উপরের বারে, "নতুন বার্তা" পাঠ্য সহ, একটি ক্লিক হ্যান্ডলারও রয়েছে, যাতে এটি ক্লিক করা হলে, এটি পপআপকে ছোট করে:
একটি জিনিস যা আপনি এখানে এড়াতে চান তা হল যে কোনও বোতামে ক্লিক করার পরে, আপনি চান না যে ক্লিক ইভেন্টটি উপরের বারে প্রচারিত হোক এবং সেই ইভেন্টের জন্য ফাংশনটি কার্যকর করুক। আমি যা বলতে চাচ্ছি তা হল, ক্লোজ বোতামে ক্লিক করার সময়, উদাহরণস্বরূপ, আপনি চান না যে উপরের বারটিও ছোট হোক।
এই ধরনের ক্ষেত্রে, আপনি প্রচার বন্ধ করতে চান।
ধরা যাক পপআপটি এভাবে তৈরি করা হয়েছে:
<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
})
এটির সাথে, উপরের বারটি শুধুমাত্র ক্লিক ইভেন্টটি পাবে যখন এটি সরাসরি ক্লিক করা হবে৷
৷র্যাপিং আপ
event.preventDefault() এর মধ্যে পার্থক্য এবং event.stopPropagation() পূর্ববর্তীটি ব্রাউজার দ্বারা তৈরি ডিফল্ট ক্রিয়াগুলিকে বাধা দেয়, যখন পরেরটি ইভেন্টের ডিফল্ট আচরণকে বাধা দেয় – গাছের প্রচার করা৷
এই ডিফল্ট ক্রিয়া এবং আচরণগুলি ভুল নয় এবং কোড করার সময় আপনাকে সেগুলি নিয়ে চিন্তা করতে হবে না৷ কিন্তু এমন পরিস্থিতি রয়েছে যেখানে আপনি সেগুলিকে ওভাররাইড করতে চান, যেমনটি আমরা এই নিবন্ধের উদাহরণগুলিতে দেখেছি৷
