শেষ পর্যন্ত কি জন্য মিথ্যা? ধন্যবাদ
window.addEventListener('load', function() {
alert("All done");
}, false);
শেষ পর্যন্ত কি জন্য মিথ্যা? ধন্যবাদ
window.addEventListener('load', function() {
alert("All done");
}, false);
উত্তর:
এমডিএন ওয়েব ডক্স অনুসারে তৃতীয় প্যারামিটারটি হ'ল:
ব্যবহারক্যাপচার
যদিtrue,useCaptureইঙ্গিত দেয় যে ব্যবহারকারী ক্যাপচার শুরু করতে চায়। ক্যাপচার শুরু করার পরে, নির্দিষ্ট ধরণের সমস্ত ইভেন্টগুলি ডিওএম ট্রিতে তার নীচেlistenerযে কোনও স্থানে প্রেরণের আগে নিবন্ধভুক্ত করাEventTargetহবে। গাছগুলির মাধ্যমে উপরের দিকে বুদবুদ হয়ে যাওয়া ইভেন্টগুলি ক্যাপচার ব্যবহারের জন্য মনোনীত শ্রোতাকে ট্রিগার করবে না। বিস্তারিত ব্যাখ্যার জন্য ডিওএম স্তর 3 ইভেন্ট দেখুন ।
আমি এমডিএনও পরীক্ষা করে দেখেছি, তবে কী কী useCaptureছিল তা আমি এখনও বুঝতে পারি নি , সুতরাং সরকারী ডকুমেন্টেশন যাচাই করে এখনও যারা উত্তর পান না তাদের পক্ষে এই উত্তরটি this
সুতরাং প্রথমত, নিম্নলিখিতগুলি প্রায় সমস্ত ব্রাউজারে ঘটে:
আই 9 9 ব্যতীত সমস্ত ব্রাউজারগুলিতে ইভেন্ট প্রসেসিংয়ের দুটি স্তর রয়েছে।
ইভেন্টটি প্রথমে নেমে যায় - এটিকে ক্যাপচারিং বলা হয় এবং তারপরে বুদবুদ হয়ে যায় । এই আচরণটি ডাব্লু 3 সি স্পেসিফিকেশনে স্ট্যান্ডার্ডাইজড।
যার অর্থ আপনি কী সেট করেছেন useCaptureতা বিবেচনাধীন নয়, এই দুটি ইভেন্টের পর্যায় সবসময়ই বিদ্যমান।
এই ছবিটি দেখায় যে এটি কীভাবে কাজ করে।

এই মডেল অনুসারে, ইভেন্ট:
ক্যাপচার ডাউন - 1 -> 2 -> 3 এর মাধ্যমে।
বুদবুদ - 3 -> 2 -> 1 এর মাধ্যমে।
তারপরে আপনার প্রশ্ন আসে। তৃতীয় প্যারাম বলা হয়ে থাকে useCaptureযে দুটি পদক্ষেপের মধ্যে আপনি আপনার হ্যান্ডলারটি ইভেন্টটি পরিচালনা করতে চান তা নির্দেশ করে।
useCapture = trueহ্যান্ডলার ক্যাপচারিং পর্বে সেট করা আছে। ইভেন্টগুলি এর বাচ্চাদের কাছে যাওয়ার আগে এটিতে আসবে।
useCapture = false।হ্যান্ডলার বুদবুদ পর্বে সেট করা আছে। ইভেন্টগুলি তার বাচ্চাদের কাছে আসার পরে এটিতে আসবে।
যার অর্থ এই যে আপনি যদি কোডটি এভাবে লিখেন:
child.addEventListener("click", second);
parent.addEventListener("click", first, true);
শিশু উপাদান ক্লিক করার সময়, firstপদ্ধতিটি আগে কল করা হবে second।
ডিফল্টরূপে, useCaptureপতাকাটি মিথ্যাতে সেট করা থাকে যার অর্থ আপনি হ্যান্ডলার কেবল ইভেন্ট বুদবুদ পর্বের সময় ডাকা হবে ।
বিস্তারিত তথ্যের জন্য, এই রেফারেন্স লিঙ্কটি ক্লিক এবং এই ।
@ লিবারার উত্তরটি খুব ভাল, আমার মতো কিছু লোকই ঘটেছে যারা মেশিনের সাথে কোডের ইন্টারঅ্যাকশনটি আরও ভাল করে বুঝতে পারেন।
সুতরাং নিম্নলিখিত স্ক্রিপ্টটি ইভেন্টের প্রচারের ব্যাখ্যা করা উচিত। এই বর্ণনাটি স্কিমা ভিত্তিতে আমি যা করার চেষ্টা করছি তা হ'ল:
নীচের ইভেন্টটি নীচে এবং উপরের ক্রিয়াকলাপের উপরে প্রবাহিত:
<window>
<document>
<body>
<section>
<div>
<paragraph>
<span>
সরলতার জন্য আমরা ক্যাপচারিং পর্বের জন্য হ্যান্ডলারের নিবন্ধকৃত স্প্যান এলিমেন্টটি শরীরে শুরু করব এবং বুদবুদ পর্বের জন্য হ্যান্ডলারের নিবন্ধনকারী দেহের উপাদানগুলিতে ফিরে আসব। সুতরাং ফলাফলটি নোড দ্বারা নোডের দ্বারা ইভেন্টটি শুরু থেকে শেষ অবধি নেওয়া হবে। লগগুলি অ্যাক্সেস করতে স্নিপেটের ডান প্যানেলে "কনসোল দেখান" ক্লিক করুন
function handler(e){
/* logs messages of each phase of the event flow associated with
the actual node where the flow was passing by */
if ( e.eventPhase == Event.CAPTURING_PHASE ){
console.log ("capturing phase :\n actual node : "+this.nodeName);
}
if ( e.eventPhase == Event.AT_TARGET){
console.log( "at target phase :\n actual node : "+this.nodeName);
}
if ( e.eventPhase == Event.BUBBLING_PHASE){
console.log ("bubbling phase :\n actual node : "+this.nodeName );
}
}
/* The following array contains the elements between the target (span and you can
click also on the paragraph) and its ancestors up to the BODY element, it can still
go up to the "document" then the "window" element, for the sake of simplicity it is
chosen to stop here at the body element
*/
arr=[document.body,document.getElementById("sectionID"),
document.getElementById("DivId"),document.getElementById("PId"),
document.getElementById("spanId")];
/* Then trying to register handelers for both capturing and bubbling phases
*/
function listener(node){
node.addEventListener( ev, handler, bool )
/* ev :event (click), handler : logging the event associated with
the target, bool: capturing/bubbling phase */
}
ev="click";
bool=true; // Capturing phase
arr.forEach(listener);
bool=false; // Bubbling phase
/* Notice that both capturing and bubbling
include the at_target phase, that's why you'll get two `at_target` phases in
the log */
arr.forEach(listener);
p {
background: gray;
color:white;
padding: 10px;
margin: 5px;
border: thin solid black
}
span {
background: white;
color: black;
padding: 2px;
cursor: default;
}
<section ID="sectionID">
<div id="DivId">
<p id="PId">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis <span id="spanId">CLICK ME </span> imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq.
</p>
</div>
</section>
লক্ষ্য করুন যে ফোকাসের মতো ইভেন্টগুলি বুদবুদ হয় না, যা সংবেদনশীল করে তোলে তিনি বেশিরভাগ ইভেন্টেই বুবলি করেন।