যে কোনও ডিওএম উপাদানগুলির জন্য সংযুক্ত ইভেন্ট হ্যান্ডলারগুলি পরীক্ষা করুন

Question

কোনও ডিওএম এলিমেন্টের জন্য কোনও ইভেন্টের সাথে কি ফাংশন / কোড যুক্ত রয়েছে তা দেখার কোনও উপায় আছে কি? ফায়ারব্যাগ বা অন্য কোনও সরঞ্জাম ব্যবহার করা।

Comments

JQuery ব্যবহার করে বা নেটিভ ডিওএম ব্যবহার করে সংযুক্ত?

— স্ল্যাक्स

@ এসএলাক্স: ভাল প্রশ্ন। যে কোনও যান্ত্রিকী ব্যবহার করে সংযুক্ত করা হয়েছে

— ক্লোদিও রেডি

Answer 1

Traditionalতিহ্যবাহী element.onclick= handlerবা এইচটিএমএল ব্যবহার করে সংযুক্ত ইভেন্ট হ্যান্ডলারগুলি স্ক্রিপ্ট বা ইন-ডিবাগার থেকে সম্পত্তি থেকে <element onclick="handler">তুচ্ছভাবে পুনরুদ্ধার করা যেতে পারে element.onclick।

ডিওএম স্তর 2 ইভেন্ট ইভেন্টগুলি addEventListenerএবং আইই এর সাহায্যে সংযুক্ত ইভেন্ট হ্যান্ডলারগুলি attachEventবর্তমানে স্ক্রিপ্ট থেকে মোটেও পুনরুদ্ধার করা যায় না। DOM স্তর 3 একবার element.eventListenerListসমস্ত শ্রোতাদের পাওয়ার প্রস্তাব করেছিল, তবে এটি চূড়ান্ত স্পেসিফিকেশনে পরিণত করবে কিনা তা অস্পষ্ট। আজ কোনও ব্রাউজারে কোনও প্রয়োগ নেই।

ব্রাউজার এক্সটেনশন হিসাবে একটি ডিবাগিং সরঞ্জাম এই ধরণের শ্রোতাদের অ্যাক্সেস পেতে পারে তবে আমি আসলে কোনটিই করি তা সম্পর্কে আমি অবগত নই।

কিছু জেএস ফ্রেমওয়ার্কগুলি ইভেন্টের রেকর্ড পর্যায়ে রেখেছিল যেগুলি তারা যা করেছে তা কাজ করে। কয়েকটি জনপ্রিয় ফ্রেমওয়ার্কের মাধ্যমে নিবন্ধিত শ্রোতাদের আবিষ্কার করতে ভিজ্যুয়াল ইভেন্টটি এই পদ্ধতির প্রয়োজন।

Comments

ইভেন্টবাগ নামে ফায়ারব্যাগের জন্য এখন একটি এক্সটেনশান রয়েছে এবং ক্রোম / সাফারিতে অনুরূপ বৈশিষ্ট্য রয়েছে। আমি এটির উপর আরও জনপ্রিয় আলোচনার

— লিঙ্কটিও করব

অপেরাতে আপনি তার জন্য বিল্ট-ইন অপেরা ড্রাগনফ্লাই ব্যবহার করতে পারেন।

— নরিল টেম্পেস্ট

এইচটিএমএল ট্যাগটি নির্বাচিত হওয়ার পরে ইভেন্টগুলির জন্য ফায়ারবগের (ফায়ারফক্সের জন্য এক্সটেনশন) অংশে একটি বিল্ট রয়েছে।

— মুসা হায়দারি

ইভেন্টব্যাগটি সংস্করণ 2 থেকে ফায়ারবগে একীভূত হয়েছে (এখন একটি "ইভেন্টস" ট্যাব রয়েছে)।

— ক্রিস রায়ে

ফায়ারফক্স 33 সাল থেকে ইভেন্ট হ্যান্ডলারগুলি স্টক এইচটিএমএল ইন্সপেক্টরটিতে প্রদর্শিত হবে ।

— ivan_pozdeev

Answer 2

গুগল ক্রোম বিকাশকারী সরঞ্জাম উপাদান প্যানেল 2010 থেকে মাঝামাঝি 2011 এবং Chrome পরীক্ষাকারীদের চ্যানেলে রিলিজ Chrome এর রিলিজ যেহেতু এই ছিল।

এছাড়াও, ঘটনা নির্বাচিত নোড দেখানো শ্রোতাকে হয় ক্রমে তারা বহিস্কার করা হয় ধরে রাখা এবং সাড়া জাগানো পর্যায়ক্রমে মাধ্যমে।

হিট command+ + option+ + iএবং Mac OSX এ Ctrl+ + Shift+ + iWindows এ Chrome এ এই ফায়ার আপ

Comments

ক্রোমে থাকা উপাদানগুলির প্যানেল কীভাবে এটি করে?

— বজ্রপাত

এছাড়াও, আমরা কীভাবে এই কোডটি নির্ধারিত করতে পারি? একবার আমি এই ইউআই ব্যবহার করে সন্দেহজনক ইভেন্ট হ্যান্ডলারটি খুঁজে পেয়েছি, বারটির পক্ষে হ্যান্ডলারের কোডটি দেখার পক্ষে আমার পক্ষে যথেষ্ট প্রশস্ত নয় ...

— স্টিভেন লু

আমি এই পদ্ধতির বদলে বিভ্রান্তি মনে করি .. কমপক্ষে আমার জন্য। যখন আমি ইভেন্টটি খুলি, এটিতে কেবল jQuery ইভেন্ট থাকে, সেই নির্দিষ্ট উপাদানটির জন্য আমার কাস্টম ইভেন্টটি দেখায় না। আমি jQuery এর সাথে সংযুক্ত কাস্টম ইভেন্টগুলির জন্য $ ._ ডেটা ব্যবহার করি। দেখুন stackoverflow.com/questions/2008592/...

— stack247

ঘটনার windowমতো বস্তুর উপরের ঘটনাগুলিও কি পরীক্ষা করা সম্ভব message?

— সেপ্টোগ্রাম

Answer 3

Chrome জাভ সরঞ্জামগুলি জাভাস্ক্রিপ্ট ইভেন্টগুলি পর্যবেক্ষণের জন্য কিছু নতুন সরঞ্জাম ঘোষণা করেছে ।

টি এল; ডিআর

একটি নির্দিষ্ট ধরণের ইভেন্ট ব্যবহার করে শুনুন monitorEvents()।

unmonitorEvents()শুনতে বন্ধ করতে ব্যবহার করুন ।

ডিওএম উপাদান ব্যবহার করে শ্রোতাদের ব্যবহার করুন getEventListeners()।

ইভেন্ট শ্রোতাদের তথ্য পেতে ইভেন্ট শ্রোতা পরিদর্শক প্যানেলটি ব্যবহার করুন।

কাস্টম ইভেন্টগুলি সন্ধান করা

আমার প্রয়োজনের জন্য, তৃতীয় পক্ষের কোডে কাস্টম জেএস ইভেন্টগুলি আবিষ্কার করে, নিম্নলিখিত দুটি সংস্করণ getEventListeners()আশ্চর্যজনকভাবে সহায়ক ছিল;

• getEventListeners(window)
• getEventListeners(document)

আপনি যদি জানেন যে ইভেন্টের শ্রোতার সাথে ডিওএম নোডটি কী সংযুক্ত ছিল আপনি এটির পরিবর্তে windowবা পাস করে দিতে পারেন document।

জ্ঞাত ইভেন্ট

আপনি কি জানেন ইভেন্টে যেমন নিরীক্ষণ করতে চান clickডকুমেন্ট শরীরের উপর আপনাকে নিম্নলিখিত ব্যবহার করতে পারে: monitorEvents(document.body, 'click');।

আপনার এখন document.bodyকনসোলে লগ ইন থাকা সমস্ত ক্লিক ইভেন্টগুলি দেখা শুরু করা উচিত ।

Comments

আমি এইgetEventListeners (ডকুমেন্ট.জেটএলমেন্টবিআইআইডি ("ইনপুটআইডি")) চেষ্টা করেছি; তবে এটি 1

— rich

Answer 4

আপনি সরাসরি সংযুক্ত ইভেন্টগুলি দেখতে পারেন (এলিমেন্ট.অনলিক = হ্যান্ডলার) ডিওএম দেখে। আপনি ফায়ারকোয়ারির সাথে ফায়ারব্যাগ ব্যবহার করে ফায়ারফক্সে jQuery- সংযুক্ত ইভেন্টগুলি দেখতে পারেন। ফায়ারবাগ ব্যবহার করে অ্যাডএভেন্টলিস্টনার-যুক্ত ইভেন্টগুলি দেখার কোনও উপায় বলে মনে হচ্ছে না। তবে আপনি Chrome ডিবাগারটি ব্যবহার করে তাদের Chrome এ দেখতে পারেন।

Answer 5

আপনি আপনার পৃষ্ঠায় বেশ কয়েকটি বড় জাভাস্ক্রিপ্ট লাইব্রেরি থেকে বর্তমানে সংযুক্ত সমস্ত ইভেন্ট হ্যান্ডলারগুলি পরিদর্শন করতে অ্যালান জার্ডিনের দ্বারা ভিজ্যুয়াল ইভেন্ট ব্যবহার করতে পারেন । এটি jQuery, YUI এবং অন্যান্য বেশ কয়েকজনের সাথে কাজ করে।

ভিজ্যুয়াল ইভেন্টটি একটি জাভাস্ক্রিপ্ট বুকমার্কলেট তাই সমস্ত বড় ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ।

Answer 6

ইভেন্ট শ্রোতাদের নজর রাখতে আপনি আপনার জাভাস্ক্রিপ্ট পরিবেশটি প্রসারিত করতে পারেন। মোড়ানো (বা 'জমিদার') কিছু কোড দিয়ে নেটিভ addEventListener () মেথড ক্যান কোনো ইভেন্টের শ্রোতা যোগ একটি রেকর্ড রেখে যে তারপর থেকেই । আপনাকে ডিএমএমে যা ঘটছে তা নির্ভুলভাবে প্রতিফলিত করে এমন রেকর্ড রাখতে আপনাকে এইচটিএমলেলেমেন্ট.প্রোটোটাইপ.রেমওভেন্টলাইজনার প্রসারিত করতে হবে।

কেবল উদাহরণের জন্য (অনির্ধারিত কোড) - আপনি কীভাবে অ্যাডভেন্টলিস্টনারকে অবজেক্টে রেজিস্টার্ড ইভেন্ট শ্রোতার রেকর্ড রাখতে 'র্যাপ' করবেন তার একটি উদাহরণ:

var nativeMethod = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function (type, listener) {
   var el = e.currentTarget;
   if(!(el.eventListeners instanceof Array)) { el.eventListeners = []}
   el.eventListeners.push({'type':type, 'listener':listener});
   nativeMethod.call(el, type, listener);
}