ইভেন্ট বুদবুদ এবং ক্যাপচারের মধ্যে পার্থক্য কী? কারও কখন বাবলিং বনাম ক্যাপচারিং ব্যবহার করা উচিত?
উত্তর:
ইভেন্ট বুদবুদ এবং ক্যাপচারিং এইচটিএমএল ডিওএম এপিআইতে ইভেন্ট প্রচারের দুটি উপায়, যখন কোনও ইভেন্টটি অন্য উপাদানটির অভ্যন্তরে ঘটে থাকে এবং উভয় উপাদানই সেই ইভেন্টটির জন্য একটি হ্যান্ডেল নিবন্ধভুক্ত করে। ইভেন্টের প্রচারের মোড নির্ধারণ করে যে উপাদানগুলি কোন ক্রমে ইভেন্টটি গ্রহণ করে ।
বুদবুদ দিয়ে, ইভেন্টটি প্রথমে অন্তর্নিহিত উপাদান দ্বারা ক্যাপচার এবং পরিচালনা করা হয় এবং তারপরে বাইরের উপাদানগুলিতে প্রচার করা হয়।
ক্যাপচারিংয়ের সাথে, ইভেন্টটি প্রথম বাহ্যিক উপাদান দ্বারা ক্যাপচার করা হয় এবং অভ্যন্তরীণ উপাদানগুলিতে প্রচার করা হয়।
ক্যাপচারিংকে "ট্রিকলিং" নামেও অভিহিত করা হয় যা প্রচারের ক্রমটি মনে রাখতে সহায়তা করে:
ছিটকে নিচে, বুদ্বুদ আপ
পুরানো দিনগুলিতে ফিরে, নেটস্কেপ ইভেন্ট ক্যাপচারের পক্ষে ছিল, অন্যদিকে মাইক্রোসফ্ট ইভেন্ট বুদবুদ প্রচার করেছিল। উভয়ই ডাব্লু 3 সি ডকুমেন্ট অবজেক্ট মডেল ইভেন্টস স্ট্যান্ডার্ড (2000) এর অংশ।
আইই <9 শুধুমাত্র ইভেন্ট বুদবুদ ব্যবহার করে , যেখানে আই 9 + এবং সমস্ত বড় ব্রাউজার উভয়ই সমর্থন করে। অন্যদিকে, জটিল ডিওএমদের জন্য ইভেন্ট বুদবুদয়ের পারফরম্যান্স কিছুটা কম হতে পারে ।
আমরা addEventListener(type, listener, useCapture)বুদবুদ (ডিফল্ট) বা ক্যাপচারিং মোডে ইভেন্ট হ্যান্ডলারগুলি নিবন্ধ করতে ব্যবহার করতে পারি । ক্যাপচারিং মডেলটি ব্যবহার করতে তৃতীয় আর্গুমেন্টটি পাস করুন true।
<div>
<ul>
<li></li>
</ul>
</div>উপরের কাঠামোর মধ্যে, ধরে নিন যে liউপাদানটিতে একটি ক্লিক ইভেন্ট ঘটেছে ।
ক্যাপচারিং মডেলটিতে, ইভেন্টটি divপ্রথম পরিচালনা করা হবে (উইলের মধ্যে ক্লিকের ইভেন্ট হ্যান্ডলারগুলি divপ্রথমে আগুন লাগবে), তারপরে ul, তারপরে শেষের দিকে লক্ষ্য উপাদানটির li,।
বুদবুদ মডেলটিতে, বিপরীতে ঘটবে: ইভেন্টটি প্রথমে দ্বারা পরিচালিত হবে li, তারপরে ulএবং শেষ পর্যন্ত divউপাদানটির মাধ্যমে।
আরও তথ্যের জন্য, দেখুন
নীচের উদাহরণে, আপনি যদি হাইলাইট হওয়া উপাদানগুলির কোনওটিতে ক্লিক করেন তবে আপনি দেখতে পাচ্ছেন যে ইভেন্টের প্রচারের প্রবাহের ক্যাপচারিং পর্বটি প্রথমে ঘটে থাকে, তারপরে বুদবুদ পর্যায়টি পরে।
var logElement = document.getElementById('log');
function log(msg) {
logElement.innerHTML += ('<p>' + msg + '</p>');
}
function capture() {
log('capture: ' + this.firstChild.nodeValue.trim());
}
function bubble() {
log('bubble: ' + this.firstChild.nodeValue.trim());
}
function clearOutput() {
logElement.innerHTML = "";
}
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', capture, true);
divs[i].addEventListener('click', bubble, false);
}
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', clearOutput);p {
line-height: 0;
}
div {
display:inline-block;
padding: 5px;
background: #fff;
border: 1px solid #aaa;
cursor: pointer;
}
div:hover {
border: 1px solid #faa;
background: #fdd;
}<div>1
<div>2
<div>3
<div>4
<div>5</div>
</div>
</div>
</div>
</div>
<button id="clear">clear output</button>
<section id="log"></section>triclklingহিসাবে একই capturing? ক্রোকফোর্ড Trickling v. Bubblingএই ভিডিও টক সম্পর্কে কথা বলছেন - youtube.com/watch?v=Fv9qT9joc0M&list=PL7664379246A246CB প্রায় 1 hr 5 minutes।
trickle downonElementbubble up
বর্ণনা:
quirksmode.org এর একটি সুন্দর বর্ণনা রয়েছে। সংক্ষেপে (quirksmode থেকে অনুলিপি করা):
ইভেন্ট ক্যাপচারিং
আপনি ইভেন্ট ক্যাপচার ব্যবহার যখন
| | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | Event CAPTURING | -----------------------------------এলিমেন্ট 1 এর ইভেন্ট হ্যান্ডলারটি প্রথমে আগুন দেয়, ইভেন্ট 2 এর আগুনের হ্যান্ডলার শেষ অবধি।
ইভেন্ট বুদবুদ
আপনি যখন ইভেন্ট বুদবুদ ব্যবহার করবেন
/ \ ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 | | | | | ------------------------- | | Event BUBBLING | -----------------------------------এলিমেন্ট 2 এর ইভেন্ট হ্যান্ডলারটি প্রথমে আগুন দেয়, ইভেন্ট 1 হ'ল এলেন্ডার শেষ অবধি।
কী ব্যবহার করবেন?
এটি আপনি কী করতে চান তার উপর নির্ভর করে। এর চেয়ে ভাল আর কিছু নেই। পার্থক্য হ'ল ইভেন্ট হ্যান্ডলারদের মৃত্যুদন্ড কার্যকর করার আদেশ। বেশিরভাগ সময় বুদবুদ পর্বে ইভেন্ট হ্যান্ডলারদের ফায়ার করা ঠিক হয়ে যায় তবে তাদের আগে গুলি চালানোও প্রয়োজনীয় হতে পারে।
যদি উপাদান দুটি এবং উপাদান 2 থাকে তবে 2 উপাদান উপাদান 1 এর অভ্যন্তরে থাকে এবং আমরা উভয় উপাদানগুলির সাথে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করি যাতে অনক্লিক বলতে দেওয়া হয়। এখন যখন আমরা উপাদান 2 এ ক্লিক করব তখন উভয় উপাদানগুলির জন্য ইভেন্টহ্যান্ডলার কার্যকর করা হবে। এখন এখানে প্রশ্নটি হল যে ক্রমটি ইভেন্টটি কার্যকর করবে। যদি উপাদান 1 এর সাথে সংযুক্ত ইভেন্টটি প্রথমে সম্পাদন করে তবে এটিকে ইভেন্ট ক্যাপচারিং বলা হয় এবং উপাদান 2 এর সাথে সংযুক্ত ইভেন্টটি যদি প্রথমে কার্যকর করে তবে এটিকে ইভেন্ট বুদবুদ বলা হয়। ডাব্লু 3 সি অনুসারে ইভেন্টটি ক্যাপচারিং পর্বে শুরু হবে যতক্ষণ না এটি লক্ষ্যে পৌঁছে যায় ততক্ষণে উপাদানটিতে ফিরে আসে এবং তারপরে এটি বুদবুদ শুরু হয়
ক্যাপচারিং এবং বুদবুদ রাষ্ট্রগুলি অ্যাডএভেন্টলিস্টনার পদ্ধতির ব্যবহারক্যাপচার পরামিতি দ্বারা পরিচিত
eventTarget.addEventListener (টাইপ, শ্রোতা, [useCapture]);
ডিফল্ট দ্বারা ব্যবহারের ক্যাপচারটি মিথ্যা। এর অর্থ এটি বুদবুদ পর্বে।
var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");
div1.addEventListener("click", function (event) {
alert("you clicked on div 1");
}, true);
div2.addEventListener("click", function (event) {
alert("you clicked on div 2");
}, false);#div1{
background-color:red;
padding: 24px;
}
#div2{
background-color:green;
}<div id="div1">
div 1
<div id="div2">
div 2
</div>
</div>সত্য এবং মিথ্যা পরিবর্তন করার চেষ্টা করুন।
the event will start in the capturing phase untill it reaches the target comes back to the element and then it starts bubbling। আমি কেবলমাত্র অ্যাডেন্টেন্টলিস্টারে প্যারামিটারটি পেয়েছি useCaptureযা সত্য বা মিথ্যাতে সেট করা যেতে পারে; এবং এইচটিএমএল ৫.০ এ ইভেন্ট শ্রোতাদের একটি উপাদান এবং এর বৈশিষ্ট্য হিসাবে নির্দিষ্ট করা হয়েছিলuseCapture defaults to false । আপনি কি এমন একটি লিঙ্কের সাথে লিঙ্ক করতে পারেন যা আপনার লেখাটি নিশ্চিত করে?
এই বিষয়টির ব্যাখ্যা দেওয়ার জন্য আমি এই টিউটোরিয়ালটি জাভাস্ক্রিপ্ট.আইনফোতে পেয়েছি very এবং এর শেষে 3 পয়েন্টের সংক্ষিপ্তসারটি সত্যই গুরুত্বপূর্ণ পয়েন্টগুলির সাথে কথা বলছে। আমি এখানে এটি উদ্ধৃত:
- ইভেন্টগুলি প্রথমে গভীর লক্ষ্য পর্যন্ত ক্যাপচার করা হয়, তারপরে বুদবুদ হয়ে যায়। আইআই <9 এ তারা কেবল বুদবুদ।
- সমস্ত হ্যান্ডলারের
addEventListenerশেষ আর্গুমেন্টের সাথে বুদ্বুদে মঞ্চ ব্যতিক্রমগুলিতে কাজ করেtrue, যা মঞ্চ ধারণের ইভেন্টটি ধরার একমাত্র উপায়।- বুবলিং / ক্যাপচারিং
event.cancelBubble=true(আইই) দ্বারা বাevent.stopPropagation()অন্যান্য ব্রাউজারগুলির দ্বারা বন্ধ করা যেতে পারে ।
এখানে Event.eventPhaseসম্পত্তি রয়েছে যা আপনাকে বলতে পারে যে ইভেন্টটি লক্ষ্যবস্তু বা অন্য কোথাও থেকে এসেছে কিনা।
নোট করুন যে ব্রাউজারের সামঞ্জস্যতা এখনও নির্ধারিত হয়নি। আমি এটি ক্রোম (66.0.3359.181) এবং ফায়ারফক্স (59.0.3) এ পরীক্ষা করেছি এবং এটি সেখানে সমর্থিত।
গৃহীত উত্তর থেকে ইতিমধ্যে দুর্দান্ত স্নিপেটে প্রসারণ করা , এটি eventPhaseসম্পত্তি ব্যবহার করে আউটপুট
var logElement = document.getElementById('log');
function log(msg) {
if (logElement.innerHTML == "<p>No logs</p>")
logElement.innerHTML = "";
logElement.innerHTML += ('<p>' + msg + '</p>');
}
function humanizeEvent(eventPhase){
switch(eventPhase){
case 1: //Event.CAPTURING_PHASE
return "Event is being propagated through the target's ancestor objects";
case 2: //Event.AT_TARGET
return "The event has arrived at the event's target";
case 3: //Event.BUBBLING_PHASE
return "The event is propagating back up through the target's ancestors in reverse order";
}
}
function capture(e) {
log('capture: ' + this.firstChild.nodeValue.trim() + "; " +
humanizeEvent(e.eventPhase));
}
function bubble(e) {
log('bubble: ' + this.firstChild.nodeValue.trim() + "; " +
humanizeEvent(e.eventPhase));
}
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', capture, true);
divs[i].addEventListener('click', bubble, false);
}p {
line-height: 0;
}
div {
display:inline-block;
padding: 5px;
background: #fff;
border: 1px solid #aaa;
cursor: pointer;
}
div:hover {
border: 1px solid #faa;
background: #fdd;
}<div>1
<div>2
<div>3
<div>4
<div>5</div>
</div>
</div>
</div>
</div>
<button onclick="document.getElementById('log').innerHTML = '<p>No logs</p>';">Clear logs</button>
<section id="log"></section>