গতিশীলভাবে সংযুক্ত ইভেন্ট শ্রোতার উপস্থিত রয়েছে কি না তা কীভাবে পরীক্ষা করবেন?

Question 1

এখানে আমার সমস্যা: গতিশীলভাবে সংযুক্ত ইভেন্ট শ্রোতার অস্তিত্বের জন্য কি কোনওভাবে পরীক্ষা করা সম্ভব? বা কীভাবে আমি ডিওমে "অনক্লিক" (?) সম্পত্তিটির স্থিতি পরীক্ষা করতে পারি? সমাধানের জন্য আমি স্ট্যাক ওভারফ্লোয়ের মতো ইন্টারনেট অনুসন্ধান করেছি, তবে কোনও ভাগ্য নেই। এখানে আমার এইচটিএমএল:

<a id="link1" onclick="linkclick(event)"> link 1 </a>
<a id="link2"> link 2 </a> <!-- without inline onclick handler -->

তারপরে জাভাস্ক্রিপ্টে আমি গতিশীলভাবে তৈরি ইভেন্ট শ্রোতাগুলিকে ২ য় লিঙ্কটিতে সংযুক্ত করি:

document.getElementById('link2').addEventListener('click', linkclick, false);

কোডটি ভালভাবে চলে, তবে সেই সংযুক্ত শ্রোতার সনাক্ত করার জন্য আমার সমস্ত প্রচেষ্টা ব্যর্থ হয়েছে:

// test for #link2 - dynamically created eventlistener
alert(elem.onclick); // null
alert(elem.hasAttribute('onclick')); // false
alert(elem.click); // function click(){[native code]} // btw, what's this?

jsFizz এখানে আছে । আপনি যদি "2 টির জন্য অ্যাঙ্কেল ক্লিক করুন" এবং তারপরে "[লিঙ্ক 2]" ক্লিক করেন, ইভেন্টটি ভাল আগুন জ্বলছে তবে "টেস্টের লিঙ্ক 2" সর্বদা মিথ্যা বলে প্রতিবেদন করে। কেউ সাহায্য করতে পারেন?

Question 2

গতিশীলভাবে সংযুক্ত ইভেন্ট শ্রোতার উপস্থিত আছে কি নেই তা যাচাই করার কোনও উপায় নেই।

কোনও ইভেন্ট শ্রোতা সংযুক্ত আছে কিনা তা আপনি কেবলমাত্র দেখতে পাচ্ছেন তা হ'ল ইভেন্ট শ্রোতাদের সংযুক্ত করে:

elem.onclick = function () { console.log (1) }

তারপরে আপনি কোনও ইভেন্ট শ্রোতার সাথে onclickফিরে !!elem.onclick(বা এর মতো কিছু) সংযুক্ত ছিলেন কিনা তা পরীক্ষা করতে পারেন ।

Question 3

আমি এরকম কিছু করেছি:

const element = document.getElementById('div');

if (element.getAttribute('listener') !== 'true') {
     element.addEventListener('click', function (e) {
         const elementClicked = e.target;
         elementClicked.setAttribute('listener', 'true');
         console.log('event has been attached');
    });
}

শ্রোতার সাথে সংযুক্ত থাকাকালীন কোনও উপাদানটির জন্য বিশেষ গুণাবলী তৈরি করা এবং তারপরে এটি উপস্থিত কিনা তা পরীক্ষা করে।

Question 4

আমি যা করব তা হ'ল আপনার ফাংশনের বাইরে একটি বুলিয়ান তৈরি করা যা মিথ্যা হিসাবে শুরু হয় এবং আপনি ইভেন্টটি সংযুক্ত করলে সত্যতে সেট হয়ে যায়। আপনি ইভেন্টটি আবার সংযুক্ত করার আগে এটি আপনার জন্য এক ধরণের পতাকা হিসাবে কাজ করবে। ধারণাটির উদাহরণ এখানে's

// initial load
var attached = false;

// this will only execute code once
doSomething = function()
{
 if (!attached)
 {
  attached = true;
  //code
 }
} 

//attach your function with change event
window.onload = function()
{
 var txtbox = document.getElementById('textboxID');

 if (window.addEventListener)
 {
  txtbox.addEventListener('change', doSomething, false);
 }
 else if(window.attachEvent)
 {
  txtbox.attachEvent('onchange', doSomething);
 }
}

Question 5

সম্ভাব্য সদৃশ: কোনও উপাদানটিতে ইভেন্ট শ্রোতা রয়েছে কিনা তা পরীক্ষা করুন। কোন jQuery দয়া করে আমার উত্তর সেখানে খুঁজে।

মূলত এখানে ক্রোমিয়াম (ক্রোম) ব্রাউজারের কৌশলটি রয়েছে:

getEventListeners(document.querySelector('your-element-selector'));

Question 6

tl; dr : না, আপনি কোনও দেশীয় সমর্থিত উপায়ে এটি করতে পারবেন না।

আমি এটি অর্জন করার একমাত্র উপায় হ'ল এটি একটি কাস্টম স্টোরেজ অবজেক্ট তৈরি করা যেখানে আপনি শ্রোতাদের যুক্ত করা একটি রেকর্ড রাখবেন। নিম্নলিখিত লাইন বরাবর কিছু:

/* Create a storage object. */
var CustomEventStorage = [];

পদক্ষেপ 1: প্রথমে, আপনার একটি ফাংশন প্রয়োজন যা স্টোরেজ অবজেক্টকে অতিক্রম করতে এবং উপাদানটির (বা মিথ্যা) প্রদত্ত কোনও উপাদানটির রেকর্ড ফিরিয়ে দিতে পারে।

/* The function that finds a record in the storage by a given element. */
function findRecordByElement (element) {
    /* Iterate over every entry in the storage object. */
    for (var index = 0, length = CustomEventStorage.length; index < length; index++) {
        /* Cache the record. */
        var record = CustomEventStorage[index];

        /* Check whether the given element exists. */
        if (element == record.element) {
            /* Return the record. */
            return record;
        }
    }

    /* Return false by default. */
    return false;
}

পদক্ষেপ 2: তারপরে, আপনার একটি ফাংশন প্রয়োজন যা ইভেন্ট শ্রোতা যুক্ত করতে পারে তবে শ্রোতাকে স্টোরেজ অবজেক্টে সন্নিবেশ করতে পারে।

/* The function that adds an event listener, while storing it in the storage object. */
function insertListener (element, event, listener, options) {
    /* Use the element given to retrieve the record. */
    var record = findRecordByElement(element);

    /* Check whether any record was found. */
    if (record) {
        /* Normalise the event of the listeners object, in case it doesn't exist. */
        record.listeners[event] = record.listeners[event] || [];
    }
    else {
        /* Create an object to insert into the storage object. */
        record = {
            element: element,
            listeners: {}
        };

        /* Create an array for event in the record. */
        record.listeners[event] = [];

        /* Insert the record in the storage. */
        CustomEventStorage.push(record);
    }

    /* Insert the listener to the event array. */
    record.listeners[event].push(listener);

    /* Add the event listener to the element. */
    element.addEventListener(event, listener, options);
}

পদক্ষেপ 3: আপনার প্রশ্নের প্রকৃত প্রয়োজনীয়তার বিষয়ে, কোনও নির্দিষ্ট ইভেন্টের জন্য কোনও ইভেন্ট ইভেন্ট শ্রোতা যুক্ত হয়েছে কিনা তা পরীক্ষা করার জন্য আপনার নিম্নলিখিত ফাংশনটির প্রয়োজন হবে।

/* The function that checks whether an event listener is set for a given event. */
function listenerExists (element, event, listener) {
    /* Use the element given to retrieve the record. */
    var record = findRecordByElement(element);

    /* Check whether a record was found & if an event array exists for the given event. */
    if (record && event in record.listeners) {
        /* Return whether the given listener exists. */
        return !!~record.listeners[event].indexOf(listener);
    }

    /* Return false by default. */
    return false;
}

পদক্ষেপ 4: অবশেষে, আপনার একটি ফাংশন প্রয়োজন যা স্টোরেজ অবজেক্ট থেকে শ্রোতাকে মুছতে পারে।

/* The function that removes a listener from a given element & its storage record. */
function removeListener (element, event, listener, options) {
    /* Use the element given to retrieve the record. */
    var record = findRecordByElement(element);

    /* Check whether any record was found and, if found, whether the event exists. */
    if (record && event in record.listeners) {
        /* Cache the index of the listener inside the event array. */
        var index = record.listeners[event].indexOf(listener);

        /* Check whether listener is not -1. */
        if (~index) {
            /* Delete the listener from the event array. */
            record.listeners[event].splice(index, 1);
        }

        /* Check whether the event array is empty or not. */
        if (!record.listeners[event].length) {
            /* Delete the event array. */
            delete record.listeners[event];
        }
    }

    /* Add the event listener to the element. */
    element.removeEventListener(event, listener, options);
}

স্নিপেট:

কোড স্নিপেট দেখান

window.onload = function () {
  var
    /* Cache the test element. */
    element = document.getElementById("test"),

    /* Create an event listener. */
    listener = function (e) {
      console.log(e.type + "triggered!");
    };

  /* Insert the listener to the element. */
  insertListener(element, "mouseover", listener);

  /* Log whether the listener exists. */
  console.log(listenerExists(element, "mouseover", listener));

  /* Remove the listener from the element. */
  removeListener(element, "mouseover", listener);

  /* Log whether the listener exists. */
  console.log(listenerExists(element, "mouseover", listener));
};

<!-- Include the Custom Event Storage file -->
<script src = "https://cdn.rawgit.com/angelpolitis/custom-event-storage/master/main.js"></script>

<!-- A Test HTML element -->
<div id = "test" style = "background:#000; height:50px; width: 50px"></div>

স্নিপেট প্রসারিত করুন

যদিও ওপি এই প্রশ্ন পোস্ট করার পরে 5 বছরেরও বেশি সময় পেরিয়ে গেছে, আমি বিশ্বাস করি ভবিষ্যতে যে লোকেরা এটিকে হোঁচট খায় তারা এই উত্তরটি থেকে উপকৃত হবেন, তাই এতে পরামর্শ বা উন্নতি করতে নির্দ্বিধায় অনুভব করুন। 😊

Question 7

উদাহরণস্বরূপ ক্রোম ইন্সপেক্টর ব্যবহার করে যদি আপনার ইভেন্টলিস্টনার উপস্থিত থাকে তবে আপনি সর্বদা ম্যানুয়ালি পরীক্ষা করতে পারেন। এলিমেন্ট ট্যাবে আপনার theতিহ্যবাহী "স্টাইলস" সাবটিব রয়েছে এবং এটির কাছাকাছি আরেকটি রয়েছে: "ইভেন্ট শ্রোতা"। যা আপনাকে সমস্ত ইভেন্টলিস্টনারের লিঙ্কযুক্ত উপাদানগুলির তালিকা দেবে।

Question 8

এটি অদ্ভুত বলে মনে হচ্ছে যে এই পদ্ধতির অস্তিত্ব নেই। শেষ পর্যন্ত এটি যোগ করার সময় কি?

আপনি চাইলে নীচের মতো কিছু করতে পারেন:

var _addEventListener = EventTarget.prototype.addEventListener;
var _removeEventListener = EventTarget.prototype.removeEventListener;
EventTarget.prototype.events = {};
EventTarget.prototype.addEventListener = function(name, listener, etc) {
  var events = EventTarget.prototype.events;
  if (events[name] == null) {
    events[name] = [];
  }

  if (events[name].indexOf(listener) == -1) {
    events[name].push(listener);
  }

  _addEventListener(name, listener);
};
EventTarget.prototype.removeEventListener = function(name, listener) {
  var events = EventTarget.prototype.events;

  if (events[name] != null && events[name].indexOf(listener) != -1) {
    events[name].splice(events[name].indexOf(listener), 1);
  }

  _removeEventListener(name, listener);
};
EventTarget.prototype.hasEventListener = function(name) {
  var events = EventTarget.prototype.events;
  if (events[name] == null) {
    return false;
  }

  return events[name].length;
};

Question 9

গতিশীলভাবে সংযুক্ত ইভেন্ট শ্রোতার অস্তিত্বের জন্য আমি যে স্ক্রিপ্টটি ব্যবহার করেছি তা এখানে। আমি কোনও ইভেন্টের সাথে কোনও ইভেন্ট হ্যান্ডলার সংযুক্ত করতে jQuery ব্যবহার করেছি, তারপরে সেই ইভেন্টটি ট্রিগার করুন (এই ক্ষেত্রে 'ক্লিক করুন' ইভেন্ট)। এইভাবে আমি ইভেন্টের বৈশিষ্ট্যগুলি পুনরুদ্ধার এবং ক্যাপচার করতে পারি যা ইভেন্ট হ্যান্ডলারটি সংযুক্ত থাকলে কেবলমাত্র উপস্থিত থাকবে।

var eventHandlerType;

$('#contentDiv').on('click', clickEventHandler).triggerHandler('click');

function clickEventHandler(e) {
    eventHandlerType = e.type;
}

if (eventHandlerType === 'click') {
    console.log('EventHandler "click" has been applied');
}

Question 10

কোনও ক্রস ব্রাউজার ফাংশন বলে মনে হচ্ছে না যা প্রদত্ত উপাদানগুলির অধীনে নিবন্ধিত ইভেন্টগুলির জন্য অনুসন্ধান করে।

তবে কিছু ব্রাউজারে তাদের বিকাশের সরঞ্জামগুলি ব্যবহার করে কল ব্যাক ফাংশনগুলি দেখা সম্ভব। কোনও ওয়েব পৃষ্ঠা কীভাবে কাজ করে বা ডিবাগিং কোডের জন্য তা নির্ধারণ করার চেষ্টা করার সময় এটি কার্যকর হতে পারে।

ফায়ারফক্স

প্রথমে বিকাশকারী সরঞ্জামগুলির মধ্যে পরিদর্শক ট্যাবে উপাদানটি দেখুন । এটি করা যেতে পারে:

পৃষ্ঠায় ওয়েবপৃষ্ঠাটি আপনি মেনু থেকে পরিদর্শন ও নির্বাচন থেকে "পরিদর্শন উপাদান" চান আইটেম ডানে ক্লিক করে।
কনসোলের মধ্যে উপাদান নির্বাচন করার জন্য কোনও ফাংশন যেমন ডকুমেন্ট.কোয়ারী নির্বাচনকারী নির্বাচন করে এবং তারপরে তদন্তকারী ট্যাবে এটি দেখার জন্য উপাদানটির পাশে আইকনটি ক্লিক করে ।

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

ক্রোম

প্রথমে বিকাশকারী সরঞ্জামগুলির মধ্যে উপাদানগুলির ট্যাবটিতে উপাদানটি দেখুন । এটি করা যেতে পারে:

পৃষ্ঠায় ওয়েবপৃষ্ঠাটি আপনি মেনু থেকে পরিদর্শন করা এবং নির্বাচনের সময়ে "পরিদর্শন" চান আইটেম ডানে ক্লিক করে
কনসোলের মধ্যে উপাদান নির্বাচন করার জন্য কোনও ফাংশন ব্যবহার করে যেমন ডকুমেন্ট.কোয়ারী নির্বাচনকারী, উপাদানটির ডানদিকে ক্লিক করে এবং এটি পরিদর্শক ট্যাবে দেখার জন্য "এলিমেন্টস প্যানেলে প্রকাশ করুন" নির্বাচন করে ।

উইন্ডোটির যে অংশটি ওয়েব পৃষ্ঠার উপাদানগুলি সহ গাছ দেখায় সেগুলির নিকটে, "ইভেন্ট শ্রোতা" শিরোনামের একটি ট্যাব সহ আরও একটি বিভাগ থাকা উচিত। উপাদানগুলিতে নিবন্ধিত ইভেন্টগুলি দেখতে এটি নির্বাচন করুন। প্রদত্ত ইভেন্টের কোডটি দেখতে, এর ডানদিকের লিঙ্কটি ক্লিক করুন।

Chrome এ, getEventListeners ফাংশনটি ব্যবহার করে কোনও উপাদানের ইভেন্টগুলিও পাওয়া যায় । তবে, আমার পরীক্ষার উপর ভিত্তি করে, getEventListeners ফাংশন ইভেন্টগুলিকে তালিকাভুক্ত করে না যখন এতে একাধিক উপাদান পাস করা হয়। যদি আপনি এই পৃষ্ঠায় শ্রোতার সমস্ত উপাদান খুঁজে পেতে এবং সেই শ্রোতার জন্য কলব্যাক ফাংশন দেখতে চান তবে এটি করতে আপনি কনসোলে নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:

var elems = document.querySelectorAll('*');

for (var i=0; i <= elems.length; i++) {
    var listeners = getEventListeners(elems[i]);

    if (Object.keys(listeners).length < 1) {
        continue;
    }

    console.log(elems[i]);

    for (var j in listeners) {
        console.log('Event: '+j);

        for (var k=0; k < listeners[j].length; k++) {
            console.log(listeners[j][k].listener);
        }
    }
}

যদি আপনি প্রদত্ত ব্রাউজারগুলিতে বা অন্য ব্রাউজারগুলিতে এটি করার উপায়গুলি জানেন তবে দয়া করে এই উত্তরটি সম্পাদনা করুন।

Question 11

আমি আমার ইভেন্টটি সংযুক্ত আছে কিনা তা দেখার চেষ্টা করেই এটি সন্ধান করেছি ...

যদি তুমি করো :

item.onclick

এটি "নাল" ফিরে আসবে

তবে আপনি যদি:

item.hasOwnProperty('onclick')

তাহলে এটি "সত্য"

সুতরাং আমি মনে করি আপনি যখন ইভেন্ট হ্যান্ডলারগুলি যুক্ত করতে "addEventListener" ব্যবহার করেন, তখন এটির অ্যাক্সেসের একমাত্র উপায় হ্যাশআউনপ্রোপার্টি through আমি আশা করি কেন বা কীভাবে তবে হায়, গবেষণার পরেও আমি এর ব্যাখ্যা খুঁজে পাইনি।

Question 12

আমি যদি ভালভাবে বুঝতে পারি তবে আপনি কেবল শ্রোতার পরীক্ষা করা হয়েছে কিনা তা যাচাই করতে পারেন তবে কোন শ্রোতা বিশেষত উপস্থাপক তা নয়।

সুতরাং কিছু কোডস কোড আপনার কোডিং প্রবাহকে পরিচালনা করতে শূন্যস্থান পূরণ করবে। একটি ব্যবহারিক পদ্ধতি হ'ল একটি stateব্যবহার ভেরিয়েবল তৈরি করা । উদাহরণস্বরূপ, শ্রোতার পরীক্ষককে নিম্নলিখিত হিসাবে সংযুক্ত করুন:

var listenerPresent=false

তবে আপনি যদি শ্রোতা সেট করেন তবে মানটি পরিবর্তন করুন:

listenerPresent=true

তারপরে আপনার ইভেন্টলিস্টারের কলব্যাকের অভ্যন্তরে আপনি নির্দিষ্ট কার্যকারিতাটি ভিতরে এবং একইভাবে নির্ধারণ করতে পারেন, উদাহরণস্বরূপ কিছু রাজ্যের উপর নির্ভরশীল ক্রিয়াকলাপগুলিতে অ্যাক্সেস বিতরণ করুন:

accessFirstFunctionality=false
accessSecondFunctionality=true
accessThirdFunctionality=true

Question 13

ইভেন্টটি যুক্ত করার আগে কেবল এটি সরান:

document.getElementById('link2').removeEventListener('click', linkclick, false);
document.getElementById('link2').addEventListener('click', linkclick, false);

Question 14

আমি কেবল একটি স্ক্রিপ্ট লিখেছি যা আপনাকে এটি অর্জন করতে দেয়। এটি আপনাকে দুটি বৈশ্বিক ফাংশন দেয়: hasEvent(Node elm, String event)এবং getEvents(Node elm)যা আপনি ব্যবহার করতে পারেন। সচেতন হন যে এটি EventTargetপ্রোটোটাইপ পদ্ধতিটি পরিবর্তন করে add/RemoveEventListenerএবং এইচটিএমএল মার্কআপ বা জাভাস্ক্রিপ্ট সিনট্যাক্সের মাধ্যমে সংযুক্ত ইভেন্টগুলির জন্য কাজ করে নাelm.on_event = ...

গিটহাবে আরও তথ্য

সরাসরি নমুনা

লিপি:

var hasEvent,getEvents;!function(){function b(a,b,c){c?a.dataset.events+=","+b:a.dataset.events=a.dataset.events.replace(new RegExp(b),"")}function c(a,c){var d=EventTarget.prototype[a+"EventListener"];return function(a,e,f,g,h){this.dataset.events||(this.dataset.events="");var i=hasEvent(this,a);return c&&i||!c&&!i?(h&&h(),!1):(d.call(this,a,e,f),b(this,a,c),g&&g(),!0)}}hasEvent=function(a,b){var c=a.dataset.events;return c?new RegExp(b).test(c):!1},getEvents=function(a){return a.dataset.events.replace(/(^,+)|(,+$)/g,"").split(",").filter(function(a){return""!==a})},EventTarget.prototype.addEventListener=c("add",!0),EventTarget.prototype.removeEventListener=c("remove",!1)}();

Question 15

আপনি এই ত্রুটিতে পিগব্যাক অ্যাডএভেন্টলিস্টনার এবং অপসারণের তালিকাতে এই "অবজেক্টে ফ্ল্যাগ সরিয়ে যোগ করতে পারেন। কুরুচি এবং আমি পরীক্ষা করিনি ...