ইভেন্ট ক্যাপচারিং
ইভেন্ট ক্যাপচারিং ঘটনাটি শীর্ষ উপাদান থেকে লক্ষ্য উপাদানে শুরু হয়। এটি ইভেন্ট বুদবুদ এর বিপরীত , যা টার্গেট এলিমেন্ট থেকে শুরু করে উপরের এলিমেন্টে।
কোড বিস্তারিত
নিম্নলিখিত কোডে, বডি সেকশনে তিনটি ডিভ উপাদান নেওয়া হয়েছে এবং একটি স্টাইল প্রয়োগ করা হয়েছে যাতে সেগুলিকে নেস্ট করা যায়।
- addEventListener ব্যবহার করে প্রতিটি div ট্যাগে একটি ইভেন্ট হ্যান্ডলার যোগ করুন ()।
- নিশ্চিত করুন যে এখানে ইভেন্টটি "ক্লিক করুন৷ " ঘটনা৷ ৷
- addEventListener() পদ্ধতি ৩টি প্যারামিটার গ্রহণ করে।
ক) এটি যে ইভেন্টটি অ্যাক্সেস করতে চলেছে, এখানে এটি ক্লিক ইভেন্ট।
খ) একটি ইভেন্ট হ্যান্ডলার ফাংশন যাতে সতর্কতা বার্তা প্রদর্শন করা যায়।
গ) তৃতীয় প্যারামিটারটিকে বলা হয় ফেজ। এই প্যারামিটারে যদি আমরা সত্য রাখি তাহলে ইভেন্ট ক্যাপচারিং সক্ষম করা হবে৷ যদি আমরা মিথ্যা রাখি তাহলে ইভেন্ট বুদবুদ৷ সক্রিয় করা হবে।
- ইভেন্ট হ্যান্ডলার ফাংশন , যা সতর্কতা বাক্সগুলি প্রদর্শন করতে ব্যবহৃত হয়, getAttribute ব্যবহার করবে () ডিভ এলিমেন্টের আইডি মান পেতে যা ক্লিক করা হয়েছে।
- যখন আমরা ভিতরের সবচেয়ে নেস্টেড ট্যাগ div3-এ ক্লিক করি , যেহেতু ইভেন্ট ক্যাপচারিং এখানে সক্ষম হয়েছে, সতর্কতা বার্তাগুলি উপরে div1 থেকে শুরু হয় টার্গেট ট্যাগে ট্যাগ করুন div3 .
- যখন আমরা div2 এ ক্লিক করি ট্যাগ, তারপর সতর্কতা বাক্সগুলি উপরে div1 থেকে প্রদর্শিত হবে ট্যাগ থেকে লক্ষ্য ট্যাগ div2.
উদাহরণ
<html>
<head>
<style>
.divstyle{
display:table-cell;
border: 2px solid black;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id = "div1" class="divstyle">
div1
<div id = "div2" class="divstyle">
div2
<div id = "div3" class="divstyle">
div3
<script>
var divs = document.getElementsByTagName("div");
for(var i = 0; i<divs.length; i++){
divs[i].addEventListener("click",clickhandler,true );
}
function clickhandler() {
alert(this.getAttribute("id") + "event got handled");
}
</script>
</body>
</html> উপরের প্রোগ্রামটি কার্যকর করার পরে আমরা স্ক্রিনে নিম্নলিখিত চিত্রটি পাই
উপরের div3-এ ক্লিক করলে (টার্গেট এলিমেন্ট) আমরা আউটপুট হিসাবে নিম্নলিখিতগুলি পাই
আউটপুট
On clicking ok of the above div1 alert box we get the following div2 alert box opened
On clicking ok of the above div2 alert box we get the following div3 alert box opened.
