জাভাস্ক্রিপ্ট / ডোম: একটি ডিওএম অবজেক্টের সমস্ত ইভেন্টগুলি কীভাবে সরিয়ে নেওয়া যায়?

Question 1

কেবলমাত্র প্রশ্ন: কোনও সামগ্রীর সমস্ত ইভেন্ট যেমন একটি ডিভ সম্পূর্ণরূপে অপসারণ করার কোনও উপায় আছে?

সম্পাদনা: আমি div.addEventListener('click',eventReturner(),false);একটি ইভেন্ট প্রতি যোগ করছি ।

function eventReturner() {
    return function() {
        dosomething();
    };
}

সম্পাদনা 2: আমি একটি উপায় পেয়েছি, যা কাজ করছে, তবে আমার ক্ষেত্রে ব্যবহার করা সম্ভব নয়:

var returnedFunction;
function addit() {
    var div = document.getElementById('div');
    returnedFunction = eventReturner();
    div.addEventListener('click',returnedFunction,false); //You HAVE to take here a var and not the direct call to eventReturner(), because the function address must be the same, and it would change, if the function was called again.
}
function removeit() {
    var div = document.getElementById('div');
    div.removeEventListener('click',returnedFunction,false);
}

Question 2

আমি নিশ্চিত না যে আপনি সমস্ত ইভেন্টগুলি সরানোর সাথে কী বোঝাতে চাইছেন । নির্দিষ্ট ধরণের ইভেন্টের জন্য সমস্ত হ্যান্ডলার বা এক প্রকারের জন্য সমস্ত ইভেন্ট হ্যান্ডলারগুলি সরাবেন?

সমস্ত ইভেন্ট হ্যান্ডলারগুলি সরান

আপনি যদি সমস্ত ইভেন্ট হ্যান্ডলারগুলি (যে কোনও ধরণের) সরাতে চান তবে আপনি উপাদানটি ক্লোন করে তার ক্লোনটি দিয়ে প্রতিস্থাপন করতে পারেন:

var clone = element.cloneNode(true);

দ্রষ্টব্য: এটি বৈশিষ্ট্য এবং শিশুদের সংরক্ষণ করবে তবে এটি ডিওএম বৈশিষ্ট্যে কোনও পরিবর্তন সংরক্ষণ করবে না।

নির্দিষ্ট ধরণের "বেনামে" ইভেন্ট হ্যান্ডলারগুলি সরান

অন্য removeEventListener()উপায়টি ব্যবহার করা হয় তবে আমার ধারণা আপনি ইতিমধ্যে এটি চেষ্টা করে ফেলেছেন এবং এটি কার্যকর হয়নি। এখানে ধরা আছে :

addEventListenerবেনামে ফাংশনে কল করা প্রতিটি সময় নতুন শ্রোতা তৈরি করে। removeEventListenerবেনামে ফাংশনে কল করার কোনও প্রভাব নেই । বেনামে ফাংশন প্রতিটি সময় যখন ডাকা হয় তখন একটি অনন্য অবজেক্ট তৈরি করে, এটি কোনও বিদ্যমান বস্তুর রেফারেন্স নয় যদিও এটি একে কল করতে পারে। কোনও ইভেন্ট শ্রোতাকে এই পদ্ধতিতে যুক্ত করার সময় নিশ্চিত হয়ে নিন যে এটি কেবল একবার যুক্ত হয়েছে, অবধি যে পদটিতে এটি যুক্ত করা হয়েছিল, ধ্বংস না হওয়া অবধি এটি স্থায়ী (মুছে ফেলা যায় না)।

আপনি মূলত কোনও ফাংশন ফেরত addEventListenerহিসাবে একটি বেনামী ফাংশনটি পাস করছেন eventReturner।

এটি সমাধান করার জন্য আপনার কাছে দুটি সম্ভাবনা রয়েছে:

কোনও ফাংশন ফেরত এমন কোনও ফাংশন ব্যবহার করবেন না। সরাসরি ফাংশনটি ব্যবহার করুন:
```
function handler() {
    dosomething();
}

div.addEventListener('click',handler,false);
```

এটির জন্য একটি মোড়ক তৈরি করুন addEventListenerএটি ফিরে আসা ফাংশনটির একটি রেফারেন্স তৈরি করে এবং কিছু অদ্ভুত removeAllEventsফাংশন তৈরি করে:

var _eventHandlers = {}; // somewhere global

const addListener = (node, event, handler, capture = false) => {
  if (!(event in _eventHandlers)) {
    _eventHandlers[event] = []
  }
  // here we track the events and their nodes (note that we cannot
  // use node as Object keys, as they'd get coerced into a string
  _eventHandlers[event].push({ node: node, handler: handler, capture: capture })
  node.addEventListener(event, handler, capture)
}

const removeAllListeners = (targetNode, event) => {
  // remove listeners from the matching nodes
  _eventHandlers[event]
    .filter(({ node }) => node === targetNode)
    .forEach(({ node, handler, capture }) => node.removeEventListener(event, handler, capture))

  // update _eventHandlers global
  _eventHandlers[event] = _eventHandlers[event].filter(
    ({ node }) => node !== targetNode,
  )
}

এবং তারপরে আপনি এটি ব্যবহার করতে পারেন:

addListener(div, 'click', eventReturner(), false)
// and later
removeAllListeners(div, 'click')

ডেমো

দ্রষ্টব্য: যদি আপনার কোডটি দীর্ঘ সময় ধরে চলে এবং আপনি প্রচুর পরিমাণে উপাদান তৈরি এবং মুছে ফেলছেন তবে আপনাকে অবশ্যই _eventHandlersধ্বংস করার সময় অন্তর্ভুক্ত উপাদানগুলি সরিয়ে ফেলা নিশ্চিত করতে হবে ।

Question 3

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

element.outerHTML = element.outerHTML;

Question 4

ইভেন্ট শ্রোতার নিজস্ব ফাংশন ব্যবহার করুন remove()। উদাহরণ স্বরূপ:

getEventListeners().click.forEach((e)=>{e.remove()})

Question 5

যেমন করভিন.অ্যামবার বলেছেন, ওয়েবকিট অন্য একজনের মধ্যে পার্থক্য রয়েছে।

ক্রোমে:

getEventListeners(document);

যা আপনাকে সমস্ত উপস্থিত ইভেন্ট শ্রোতার সাথে একটি অবজেক্ট দেয়:

Object 
 click: Array[1]
 closePopups: Array[1]
 keyup: Array[1]
 mouseout: Array[1]
 mouseover: Array[1]
 ...

এখান থেকে আপনি যে শ্রোতাদের সরাতে চান তা পৌঁছাতে পারেন:

getEventListeners(document).copy[0].remove();

তাই সমস্ত ইভেন্ট শ্রোতা:

for(var eventType in getEventListeners(document)) {
   getEventListeners(document)[eventType].forEach(
      function(o) { o.remove(); }
   ) 
}

ফায়ারফক্সে

কিছুটা পৃথক কারণ এটি একটি শ্রোতার মোড়ক ব্যবহার করে যাতে কোনও সরানোর কার্য নেই। আপনি যে শ্রোতা অপসারণ করতে চান তা পেতে হবে:

document.removeEventListener("copy", getEventListeners(document).copy[0].listener)

সমস্ত ইভেন্ট শ্রোতা:

for(var eventType in getEventListeners(document)) {
  getEventListeners(document)[eventType].forEach(
    function(o) { document.removeEventListener(eventType, o.listener) }
  ) 
}

কোনও সংবাদ ওয়েবসাইটের বিরক্তিকর অনুলিপি সুরক্ষা অক্ষম করার চেষ্টা করে আমি এই পোস্টে হোঁচট খেয়েছি।

উপভোগ করুন!

Question 6

আপনি সমস্ত কলকে আটকানোর জন্য একটি হুক ফাংশন যুক্ত করতে পারেন addEventHandler। হুক হ্যান্ডলারের একটি তালিকাতে চাপ দেবে যা ক্লিনআপের জন্য ব্যবহার করা যেতে পারে। উদাহরণ স্বরূপ,

if (EventTarget.prototype.original_addEventListener == null) {
    EventTarget.prototype.original_addEventListener = EventTarget.prototype.addEventListener;

    function addEventListener_hook(typ, fn, opt) {
        console.log('--- add event listener',this.nodeName,typ);
        this.all_handlers = this.all_handlers || [];
        this.all_handlers.push({typ,fn,opt});
        this.original_addEventListener(typ, fn, opt);  
    }

    EventTarget.prototype.addEventListener = addEventListener_hook;
}

আপনার কোডটি আপনার প্রধান ওয়েব পৃষ্ঠার শীর্ষের নিকটে প্রবেশ করা উচিত (উদাঃ index.html)। ক্লিনআপের সময়, আপনি সমস্ত_হ্যান্ডলারদের মধ্য থেকে লুপ করতে পারেন এবং প্রত্যেকের জন্য রিমুভ-এভেস্টহ্যান্ডলারকে কল করতে পারেন। একই ফাংশনটির সাথে একাধিক বার রিমুভের এভেন্টহ্যান্ডলার কল করার বিষয়ে চিন্তা করবেন না। এটা নিরীহ।

উদাহরণ স্বরূপ,

function cleanup(elem) {
    for (let t in elem) if (t.startsWith('on') && elem[t] != null) {
        elem[t] = null;
        console.log('cleanup removed listener from '+elem.nodeName,t);
    } 
    for (let t of elem.all_handlers || []) {
        elem.removeEventListener(t.typ, t.fn, t.opt);
        console.log('cleanup removed listener from '+elem.nodeName,t.typ);
    } 
}

দ্রষ্টব্য: আইই ইভেন্টের টার্গেটের পরিবর্তে এলিমেন্টটি ব্যবহার করুন এবং কার্য সম্পাদন করতে => পরিবর্তন করুন এবং অন্যান্য বিভিন্ন জিনিস।

Question 7

উত্তরগুলি সম্পূর্ণ করতে, আপনি ওয়েবসাইটগুলিতে ঘুরে দেখার সময় ইভেন্টগুলি অপসারণের বাস্তব-বিশ্বের উদাহরণ এখানে রয়েছে এবং উত্পন্ন HTML এবং জাভাস্ক্রিপ্ট কোডের নিয়ন্ত্রণ নেই।

কিছু বিরক্তিকর ওয়েবসাইটগুলি আপনাকে লগইন ফর্মগুলিতে ব্যবহারকারীর নাম অনুলিপি করতে বাধা দিচ্ছে, যা onpasteইভেন্টটি onpaste="return false"এইচটিএমএল বৈশিষ্ট্যের সাথে যুক্ত করা থাকলে সহজেই বাইপাস করা যেতে পারে । এই ক্ষেত্রে আমাদের কেবল ইনপুট ক্ষেত্রে ডান ক্লিক করতে হবে, ফায়ারফক্সের মতো ব্রাউজারে "উপাদানটি পরীক্ষা করুন" নির্বাচন করুন এবং এইচটিএমএল বৈশিষ্ট্যটি অপসারণ করতে হবে।

যাইহোক, যদি ইভেন্টটি জাভাস্ক্রিপ্টের মাধ্যমে এভাবে যুক্ত করা হয়:

document.getElementById("lyca_login_mobile_no").onpaste = function(){return false};

আমাদের জাভাস্ক্রিপ্টের মাধ্যমে ইভেন্টটি সরিয়ে ফেলতে হবে:

document.getElementById("lyca_login_mobile_no").onpaste = null;

আমার উদাহরণস্বরূপ, আমি "লাইকা_লগিন_মোবাইল_ন" আইডিটি ব্যবহার করেছি যেহেতু এটি যে ওয়েবসাইটটি আমি ভিজিট করছিলাম তা ব্যবহৃত টেক্সট ইনপুট আইডি।

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

এটি জাভাস্ক্রিপ্টের মাধ্যমে দ্রুত এবং স্বয়ংক্রিয়ভাবেও করা যায়:

var oldNode = document.getElementById("lyca_login_mobile_no");
var newNode = oldNode.cloneNode(true);
oldNode.parentNode.insertBefore(newNode, oldNode);
oldNode.parentNode.removeChild(oldNode);

আপডেট: যদি ওয়েব অ্যাপটি অ্যাঙ্গুলারের মতো একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করে তৈরি করা হয় তবে দেখে মনে হয় যে পূর্ববর্তী সমাধানগুলি অ্যাপ্লিকেশনটি কাজ করছে না বা ভঙ্গ করছে না। পেস্ট করার অনুমতি দেওয়ার জন্য অন্য একটি কাজ হ'ল জাভাস্ক্রিপ্টের মাধ্যমে মান সেট করা:

document.getElementById("lyca_login_mobile_no").value = "username";

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

Question 8

কৌণিক এই সমস্যার জন্য একটি পলফিল আছে, আপনি পরীক্ষা করতে পারেন। আমি বেশি কিছু বুঝতে পারিনি তবে সম্ভবত এটি সাহায্য করতে পারে।

কনস্টম REMOVE_ALL_LISTENERS_EVENT_LISTENER = 'অপসারণের সমস্ত তালিকাভুক্ত';

    proto[REMOVE_ALL_LISTENERS_EVENT_LISTENER] = function () {
        const target = this || _global;
        const eventName = arguments[0];
        if (!eventName) {
            const keys = Object.keys(target);
            for (let i = 0; i < keys.length; i++) {
                const prop = keys[i];
                const match = EVENT_NAME_SYMBOL_REGX.exec(prop);
                let evtName = match && match[1];
                // in nodejs EventEmitter, removeListener event is
                // used for monitoring the removeListener call,
                // so just keep removeListener eventListener until
                // all other eventListeners are removed
                if (evtName && evtName !== 'removeListener') {
                    this[REMOVE_ALL_LISTENERS_EVENT_LISTENER].call(this, evtName);
                }
            }
            // remove removeListener listener finally
            this[REMOVE_ALL_LISTENERS_EVENT_LISTENER].call(this, 'removeListener');
        }
        else {
            const symbolEventNames = zoneSymbolEventNames$1[eventName];
            if (symbolEventNames) {
                const symbolEventName = symbolEventNames[FALSE_STR];
                const symbolCaptureEventName = symbolEventNames[TRUE_STR];
                const tasks = target[symbolEventName];
                const captureTasks = target[symbolCaptureEventName];
                if (tasks) {
                    const removeTasks = tasks.slice();
                    for (let i = 0; i < removeTasks.length; i++) {
                        const task = removeTasks[i];
                        let delegate = task.originalDelegate ? task.originalDelegate : task.callback;
                        this[REMOVE_EVENT_LISTENER].call(this, eventName, delegate, task.options);
                    }
                }
                if (captureTasks) {
                    const removeTasks = captureTasks.slice();
                    for (let i = 0; i < removeTasks.length; i++) {
                        const task = removeTasks[i];
                        let delegate = task.originalDelegate ? task.originalDelegate : task.callback;
                        this[REMOVE_EVENT_LISTENER].call(this, eventName, delegate, task.options);
                    }
                }
            }
        }
        if (returnTarget) {
            return this;
        }
    };

....

Question 9

আপনি উদাহরণস্বরূপ ইভেন্ট শ্রোতাদের সাফ করার জন্য একটি সহায়ক ফাংশন যুক্ত করতে পারেন

function clearEventListener(element) {
 const clonedElement = element.cloneNode(true);
element.replaceWith(clonedElement);
return clonedElement;
}

কেবলমাত্র উপাদানটিতে ফাংশনে প্রবেশ করুন এবং এটিই ...

Question 10

var div = getElementsByTagName('div')[0]; /* first div found; you can use getElementById for more specific element */
div.onclick = null; // OR:
div.onclick = function(){};

// সম্পাদনা করুন

ইভেন্টগুলি সংযুক্ত করার জন্য আপনি কোন পদ্ধতিটি ব্যবহার করছেন তা আমি জানতাম না। জন্য addEventListenerআপনি এই ব্যবহার করতে পারেন:

div.removeEventListener('click',functionName,false); // functionName is the name of your callback function

আরও বিশদ

Question 11

আপনি যদি এর মতো কিছু করেন তবে ব্রাউজারটি এটি আপনার জন্য করবে be

পুরানোটির আগে divএবং এর বৈশিষ্ট্যগুলি অনুলিপি করুন এবং এটি sertোকান, তারপরে সামগ্রীটি পুরানো থেকে নতুনতে সরিয়ে পুরানোটি মুছবেন?

Question 12

সমস্ত ইভেন্ট সরিয়ে ফেলা হচ্ছে document :

এক রৈখিক:

for (key in getEventListeners(document)) { getEventListeners(document)[key].forEach(function(c) { c.remove() }) }

সুন্দর সংস্করণ:

for (key in getEventListeners(document)) {
  getEventListeners(document)[key].forEach(function(c) {
    c.remove()
  })   
}

Question 13

শুধুমাত্র ক্রোম

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

function(eventType){
    getEventListeners(window).[eventType].forEach(
        function(e){
            window.removeEventListener(eventType, e.listener)
        }
    );
}

আমি আশা করি এর আগের কাউকে "অপসারণ" পদ্ধতিটি ব্যবহার করা হয়েছে যা তখন থেকে আর কাজ করে না helps

Question 14

একটি পদ্ধতি হ'ল একটি নতুন ইভেন্ট শ্রোতা যুক্ত করুন যা e.stopImediaPropagation () কল করে।