Document.addEventListener এবং window.addEventListener এর মধ্যে পার্থক্য?

Question

ফোনগ্যাপ ব্যবহার করার সময় এটিতে কিছু ডিফল্ট জাভাস্ক্রিপ্ট কোড ব্যবহার করে document.addEventListenerতবে আমার নিজস্ব কোড রয়েছে যা ব্যবহার করে window.addEventListener:

function onBodyLoad(){
    document.addEventListener("deviceready", onDeviceReady, false);
    document.addEventListener("touchmove", preventBehavior, false);
    window.addEventListener('shake', shakeEventDidOccur, false);
}

পার্থক্য কী এবং কোনটি ব্যবহার করা ভাল?

Answer 1

documentএবং windowবিভিন্ন বস্তুর এবং তারা কিছু ভিন্ন ঘটনা। addEventListener()এগুলি ব্যবহার করে কোনও পৃথক বস্তুর জন্য নির্ধারিত ইভেন্টগুলি শোনায়। আপনার আগ্রহী ইভেন্টটি আসলে আপনার ব্যবহার করা উচিত।

উদাহরণস্বরূপ, অবজেক্টটিতে এমন একটি "resize"ইভেন্ট windowরয়েছে যা documentঅবজেক্টটিতে নেই।

উদাহরণস্বরূপ, "DOMContentLoaded"ইভেন্টটি কেবলমাত্র documentবস্তুটিতে।

সুতরাং মূলত, আপনাকে জানতে হবে যে কোন বিষয়টি আপনার আগ্রহী ইভেন্টটি গ্রহণ করে এবং .addEventListener()সেই নির্দিষ্ট অবজেক্টটিতে ব্যবহার করে।

এখানে একটি আকর্ষণীয় চার্ট রয়েছে যা দেখায় যে কোন ধরণের অবজেক্টগুলি কোন ধরণের ইভেন্ট তৈরি করে: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_references

---

আপনি যদি কোনও প্রচারিত ইভেন্ট (যেমন ক্লিক ইভেন্ট) শুনছেন, তবে আপনি ডকুমেন্ট অবজেক্ট বা উইন্ডো অবজেক্টের যে কোনও ক্ষেত্রে সেই ইভেন্টটি শুনতে পারবেন। প্রচারিত ইভেন্টগুলির একমাত্র প্রধান পার্থক্য সময় নির্ধারণ। documentঘটনাবস্তুটির আগে বস্তুটিকে আঘাত করবে windowকারণ এটি হায়ারার্কিতে প্রথম ঘটে, তবে এই পার্থক্যটি সাধারণত অবিরাম হয় তাই আপনি যে কোনওটিকে বেছে নিতে পারেন। প্রচারিত ইভেন্টগুলি পরিচালনা করার সময় আপনার প্রয়োজনগুলি পূরণ করে এমন ইভেন্টের উত্সের সবচেয়ে কাছের বস্তুটি বেছে নেওয়া আমার পক্ষে সাধারণত ভাল। এটি আপনাকে পরামর্শ দিবে যে কখন কাজ করবে documentover windowতবে, আমি প্রায়শই উত্সের আরও কাছাকাছি চলে যাই এবং document.bodyনথিতে কিছু সাধারণ পিতামাতাকে ব্যবহার করতে (যদি সম্ভব হয়)।

Comments

"ডকুমেন্টে বুদবুদ হওয়া কিন্তু উইন্ডো নয়" জিনিসটি সম্পর্কে আমি কৌতূহল ছিলাম। সুতরাং আমি এটি এখানে পরীক্ষা করেছি -> jsfiddle.net/k3qv9/1 আমি কিছু অনুপস্থিত বা বুদবুদ আসলেই ঘটে?

— বানজোমাইকাকা

@ জপ্লোমোসেডো - আপনার মন্তব্যের আগে আমি বুদবুদ সম্পর্কে অংশটি আমার হিসাবে সরিয়ে দিয়েছি কারণ কোন ঘটনাগুলি উইন্ডোতে বুদবুদ হয় এবং কোনটি হয় না তা নিশ্চিত করে না। আমি যে প্রোটোকলটি সবসময় দেখেছি তা হ'ল ডকুমেন্টের প্রশস্ত বুদবুদ ইভেন্টগুলিকে document.bodyঅবজেক্ট বা documentঅবজেক্টে বাধা দেওয়া যাতে windowবুদবুদ ইভেন্টগুলির জন্য কোনও কারণ নেই । যাইহোক আমার উত্তরের মূল বক্তব্যটি হ'ল কিছু ইভেন্ট কেবল চালু থাকে windowএবং কিছু ইভেন্ট কেবল চালু থাকে documentএবং কিছু কিছু উভয় ক্ষেত্রেই থাকে সুতরাং ওপিকে সেই বিষয়টিকে বেছে নিতে হবে যা তারা যে ইভেন্টটি পরিচালনা করতে চায় তার সাথে সামঞ্জস্য করে।

— jفر00

ওকি ডোকি। আমি সাধারণত এটিই করি - কেন আমি এটি পরীক্ষা করার সিদ্ধান্ত নিয়েছিলাম। উত্তর করার জন্য ধন্যবাদ!

— বানজোমাইকাাকা

যেহেতু 'ক্লিক' ইভেন্টটি নথি এবং উইন্ডো উভয়ই উপলভ্য এবং যদি আমরা উভয় নথি এবং উইন্ডোতে ইভেন্টটি নিবন্ধভুক্ত করি তবে প্রথমে উইন্ডোতে নথির ফায়ার ক্লিকের হ্যান্ডলারটি ক্লিক করুন। সুতরাং দস্তাবেজের এই দৃষ্টিকোণের জন্য পছন্দটি ভাল। jsfiddle.net/3LcVw

— কোডার

আর একটি উদাহরণ: আপনি যদি স্যামসাং টিভির addEventListener("keydown", event)মাধ্যমে যুক্ত করেন তবে windowএটি কার্যকর হবে না। তবে আপনি একই জিনিসটি সাথে করবেন documentতবে তা হবে। এটি কীভাবে বুদ্বুদযুক্ত ইভেন্টগুলি কল করে নির্দিষ্ট ডিভাইসেও নির্ভর করে।

— জাকুব কুবিস্তা

Answer 2

আপনি দেখতে পাবেন যে জাভাস্ক্রিপ্টে সাধারণত একই জিনিসটি করার বা একই তথ্য খুঁজে পাওয়ার বিভিন্ন উপায় রয়েছে। আপনার উদাহরণে, আপনি এমন কিছু উপাদান সন্ধান করছেন যা সর্বদা বিদ্যমান থাকার গ্যারান্টিযুক্ত। windowএবং documentউভয়ই বিলটি ফিট করে (মাত্র কয়েকটি পার্থক্য সহ)।

থেকে মজিলা দেব নেটওয়ার্কের :

addEventListener () একক লক্ষ্যে একক ইভেন্ট শ্রোতাদের নিবন্ধভুক্ত করে। ইভেন্টের লক্ষ্যটি কোনও নথিতে, নথিতে নিজেই, একটি উইন্ডো বা একটি এক্সএমএলএইচটিপিআরকোয়েস্টের একক উপাদান হতে পারে।

সুতরাং যতক্ষণ আপনি সর্বদা আপনার "লক্ষ্য" এর উপর নির্ভর করতে পারেন, ততক্ষণ পার্থক্য হ'ল আপনি যে ইভেন্টগুলির জন্য শুনছেন, তাই কেবল আপনার প্রিয় ব্যবহার করুন use

Comments

এটি সাধারণভাবে সত্য নয়। বিভিন্ন ঘটনা বিভিন্ন বস্তুর উপর ঘটে। documentএবং windowএকই ইভেন্টগুলি গ্রহণ করবেন না। আপনি বস্তুর যে ঘটনা আপনি আগ্রহী পায় বাছাই করা উচিত। কেউ কেউ ঘটনা উভয় যেতে পারে documentএবং windowসব নয়, কিন্তু।

— jender00

Answer 3

windowবাঁধাই করার জন্য একটি বিল্ট-ইন বস্তুর ব্রাউজার দ্বারা উপলব্ধ বোঝায়। এটি ব্রাউজার উইন্ডোটিতে প্রতিনিধিত্ব করে যা এতে রয়েছে document। এর addEventListenerপদ্ধতিকে কল করা দ্বিতীয় আর্গুমেন্ট (কলব্যাক ফাংশন) রেজিস্টার করে যখনই তার প্রথম যুক্তির দ্বারা বর্ণিত ইভেন্টটি ঘটে।

<p>Some paragraph.</p>
<script>
  window.addEventListener("click", () => {
    console.log("Test");
  });
</script>

অ্যাডভেন্টলিস্টারে উইন্ডো বা নথি নির্বাচন করার আগে নিম্নলিখিত পয়েন্টগুলি লক্ষ করা উচিত

1. ঘটনা বেশিরভাগ একই windowবা documentকিন্তু কিছু ঘটনা পছন্দ resize, এবং এর সাথে সম্পর্কিত অন্যান্য ঘটনা loading, unloadingএবং opening/closingসব উইন্ডোতে নির্ধারণ করা উচিত।
2. উইন্ডোতে নথি থাকায় হ্যান্ডেল করার জন্য ডকুমেন্ট ব্যবহার করা ভাল অনুশীলন (যদি এটি হ্যান্ডেল করতে পারে) যেহেতু ইভেন্টটি প্রথমে ডকুমেন্টকে আঘাত করবে।
3. ইন্টারনেট এক্সপ্লোরার উইন্ডোতে নিবন্ধিত অনেক ইভেন্টের প্রতিক্রিয়া জানায় না, তাই ইভেন্টটি নিবন্ধ করার জন্য আপনাকে ডকুমেন্ট ব্যবহার করতে হবে।