জাভাস্ক্রিপ্টে বেনামে ফাংশনগুলিতে মুছে ফেলুনEventListener

Question 1

আমার একটি অবজেক্ট রয়েছে যার এতে পদ্ধতি রয়েছে। এই পদ্ধতিগুলি বেনামে ফাংশনটির ভিতরে অবজেক্টে রাখা হয়। দেখে মনে হচ্ছে:

var t = {};
window.document.addEventListener("keydown", function(e) {
    t.scroll = function(x, y) {
        window.scrollBy(x, y);
    };
    t.scrollTo = function(x, y) {
        window.scrollTo(x, y);
    };
});

(আরও অনেক কোড রয়েছে তবে সমস্যাটি দেখানোর জন্য এটি যথেষ্ট)

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

আমার বেনামে ফাংশনের ভিতরে একটি পদ্ধতি তৈরি হয়েছে এবং তাই আমি ভেবেছিলাম এটি সম্ভব হয়েছিল। এটা এমন দেখতে:

t.disable = function() {
    window.document.removeEventListener("keydown", this, false);
}

আমি কেন এটি করতে পারি না?

এটি করার জন্য অন্য কোনও (ভাল) উপায় আছে?

বোনাস তথ্য; এটি কেবল সাফারিতে কাজ করতে পারে, তাই আই আই সমর্থনটি অনুপস্থিত।

Question 2

আমি বিশ্বাস করি এটি একটি বেনামি ফাংশনের মূল বিষয়, এটির নাম বা রেফারেন্সের উপায় নেই।

আমি যদি আপনি ছিলাম আমি কেবল একটি নামকৃত ফাংশন তৈরি করব, বা এটি একটি ভেরিয়েবলে রেখে দেব যাতে আপনার কাছে এটির একটি উল্লেখ থাকে।

var t = {};
var handler = function(e) {
    t.scroll = function(x, y) {
        window.scrollBy(x, y);
    };
    t.scrollTo = function(x, y) {
        window.scrollTo(x, y);
    };
};
window.document.addEventListener("keydown", handler);

এরপরে আপনি এটিকে সরাতে পারেন

window.document.removeEventListener("keydown", handler);

Question 3

আপনি যদি আসল ফাংশনের ভিতরে থাকেন তবে আপনি ফাংশনের রেফারেন্স হিসাবে আর্গুমেন্টস.কলে ব্যবহার করতে পারেন। যেমন হিসাবে:

button.addEventListener('click', function() {
      ///this will execute only once
      alert('only once!');
      this.removeEventListener('click', arguments.callee);
});

সম্পাদনা: আপনি কঠোর মোডে ( "use strict";) কাজ করে থাকলে এটি কাজ করবে না

Question 4

কট্টর মোডে কাজ করে অটো ন্যাসকারেলার সমাধানের একটি সংস্করণ :

button.addEventListener('click', function handler() {
      ///this will execute only once
      alert('only once!');
      this.removeEventListener('click', handler);
});

Question 5

window.document.removeEventListener("keydown", getEventListeners(window.document.keydown[0].listener));

বেশ কয়েকটি বেনাম ফাংশন হতে পারে, কীডাউন 1

সতর্কতা: শুধুমাত্র কাজ করে Chrome Dev Tools& কোডে ব্যবহার করা যাবে না : লিংক

Question 6

আধুনিক ব্রাউজারগুলিতে আপনি নিম্নলিখিতগুলি করতে পারেন ...

button.addEventListener( 'click', () => {
    alert( 'only once!' );
}, { once: true } );

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener# প্যারামিটার

Question 7

একটি বেনামে বিকল্প নয়

element.funky = function() {
    console.log("Click!");
};
element.funky.type = "click";
element.funky.capt = false;
element.addEventListener(element.funky.type, element.funky, element.funky.capt);
// blah blah blah
element.removeEventListener(element.funky.type, element.funky, element.funky.capt);

অ্যান্ডির কাছ থেকে প্রতিক্রিয়া গ্রহণ করার পরে ( বেশিরভাগ উদাহরণ হিসাবে, তবে আমি ধারণাটির প্রাসঙ্গিক প্রসার প্রদর্শন করতে চেয়েছি ), এখানে একটি জটিল জটিল বর্ণনা দেওয়া হয়েছে :

<script id="konami" type="text/javascript" async>
    var konami = {
        ptrn: "38,38,40,40,37,39,37,39,66,65",
        kl: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
    };
    document.body.addEventListener( "keyup", function knm ( evt ) {
        konami.kl = konami.kl.slice( -9 );
        konami.kl.push( evt.keyCode );
        if ( konami.ptrn === konami.kl.join() ) {
            evt.target.removeEventListener( "keyup", knm, false );

            /* Although at this point we wish to remove a listener
               we could easily have had multiple "keyup" listeners
               each triggering different functions, so we MUST
               say which function we no longer wish to trigger
               rather than which listener we wish to remove.

               Normal scoping will apply to where we can mention this function
               and thus, where we can remove the listener set to trigger it. */

            document.body.classList.add( "konami" );
        }
    }, false );
    document.body.removeChild( document.getElementById( "konami" ) );
</script>

এটি কার্যকরভাবে বেনামে ফাংশন কাঠামোর অনুমতি দেয়, ব্যবহারিকভাবে অবহেলিত কলির ব্যবহার এড়িয়ে যায় এবং সহজে সরানোর অনুমতি দেয়।

ঘটনাক্রমে : শ্রোতা সেট করার সাথে সাথেই স্ক্রিপ্টের উপাদানটি অপসারণ হ'ল কোড লুকানোর জন্য একটি দুর্দান্ত কৌশল যা পছন্দ করবে চোখের ছাঁটাই একেবারেই সুস্পষ্ট নয় ( অবাক করে দেবে অবাক করে দেবে) ;-)

সুতরাং পদ্ধতিটি ( আরও সহজভাবে ):

element.addEventListener( action, function name () {
    doSomething();
    element.removeEventListener( action, name, capture );
}, capture );

Question 8

এটি আদর্শ না কারণ এটি সমস্ত সরিয়ে দেয় তবে এটি আপনার প্রয়োজনের জন্য কাজ করতে পারে:

z = document.querySelector('video');
z.parentNode.replaceChild(z.cloneNode(1), z);

একটি নোড ক্লোনিং এর সমস্ত বৈশিষ্ট্য এবং তাদের মানগুলি অনুলিপি (– লাইনে) সহ অনুলিপি করে। এটি ইভেন্ট শ্রোতাদের অ্যাডএভেন্টলিস্টনার () ব্যবহার করে অনুলিপি করে না

নোড.ক্লোননোড ()

Question 9

জাভাস্ক্রিপ্ট : অ্যাডএভেন্টলিস্টনার পদ্ধতিটি ইভেন্ট স্ট্র্যাটে (এলিমেন্ট | ডকুমেন্ট | উইন্ডো) এর উপরে বর্ণিত শ্রোতাদের নিবন্ধ রেখেছে।

ইভেন্টট্যারেট addEventListener ( ইভেন্ট_প্রকার , হ্যান্ডলার_ফংশন, বুদবুদ | ক্যাপচারিং );

মাউস, কীবোর্ড ইভেন্টগুলি ওয়েবকনসোলের উদাহরণ পরীক্ষার:

var keyboard = function(e) {
    console.log('Key_Down Code : ' + e.keyCode);
};
var mouseSimple = function(e) {
    var element = e.srcElement || e.target;
    var tagName = element.tagName || element.relatedTarget;
    console.log('Mouse Over TagName : ' + tagName);    
};
var  mouseComplex = function(e) {
    console.log('Mouse Click Code : ' + e.button);
} 

window.document.addEventListener('keydown',   keyboard,      false);
window.document.addEventListener('mouseover', mouseSimple,   false);
window.document.addEventListener('click',     mouseComplex,  false);

অপসারণ অপসারণ- পদ্ধতি ইভেন্ট শ্রোতার পূর্বে ইভেন্টটিচারেট.এডএডএভেন্টলিস্টনার () এর সাথে নিবন্ধিত করে।

window.document.removeEventListener('keydown',   keyboard,     false);
window.document.removeEventListener('mouseover', mouseSimple,  false);
window.document.removeEventListener('click',     mouseComplex, false);

আমি ব্যবহার করতে পারেন

Question 10

এটিতে আরও একটি আপ-টু-ডেট পদ্ধতির জন্য:

//one-time fire
element.addEventListener('mousedown', {
  handleEvent: function (evt) {
    element.removeEventListener(evt.type, this, false);
  }
}, false);

Question 11

আমি একই সমস্যা জুড়ে হোঁচট খেয়েছি এবং এটিই আমার পক্ষে সেরা সমাধান ছিল:

/*Adding the event listener (the 'mousemove' event, in this specific case)*/
element.onmousemove = function(event) {
    /*do your stuff*/
};
/*Removing the event listener*/
element.onmousemove = null;

দয়া করে মনে রাখবেন আমি এটির windowউপাদান এবং 'mousemove'ইভেন্টের জন্য কেবল এটি পরীক্ষা করেছি তাই এই পদ্ধতির সাথে কিছু সমস্যা হতে পারে।

Question 12

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

<target>ইভেন্টের শ্রোতার অনুরোধের বাইরে ফাংশনটি সঞ্চয় করতে এবং ঘোষণা করতে আমি ব্যক্তিগতভাবে একটি পরিবর্তনশীল ব্যবহার করি যেমন:

const target = document.querySelector('<identifier>');

function myFunc(event) { function code; }

target.addEventListener('click', myFunc);

তারপরে শ্রোতাদের অপসারণ করতে:

target.removeEventListener('click', myFunc);

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

Question 13

আমি জানি এটি মোটামুটি পুরানো থ্রেড, তবে আমি ভেবেছিলাম যারা এটি দরকারী মনে করেন তাদের জন্য আমি আমার দুটি সেন্ট স্থাপন করতে পারি।

স্ক্রিপ্ট (উদ্বেগহীন পদ্ধতির নামগুলির জন্য ক্ষমা):

window.Listener = {
    _Active: [],
    remove: function(attached, on, callback, capture){
        for(var i = 0; i < this._Active.length; i++){
            var current = this._Active[i];
            if(current[0] === attached && current[1] === on && current[2] === callback){
                attached.removeEventListener(on, callback, (capture || false));
                return this._Active.splice(i, 1);
            }
        }
    }, removeAtIndex(i){
        if(this._Active[i]){
            var remove = this._Active[i];
            var attached = remove[0], on = remove[1], callback = remove[2];
            attached.removeEventListener(on, callback, false);
            return this._Active.splice(i, 1);
        }
    }, purge: function(){
        for(var i = 0; i < this._Active.length; i++){
            var current = this._Active[i];
            current[0].removeEventListener(current[1], current[2]);
            this._Active.splice(i, 1);
        }
    }, declare: function(attached, on, callback, capture){
        attached.addEventListener(on, callback, (capture || false));
        if(this._Active.push([attached, on, callback])){
            return this._Active.length - 1;
        }
    }
};

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

// declare a new onclick listener attached to the document
var clickListener = Listener.declare(document, "click" function(e){
    // on click, remove the listener and log the clicked element
    console.log(e.target);
    Listener.removeAtIndex(clickListener);
});

// completely remove all active listeners 
// (at least, ones declared via the Listener object)
Listener.purge();

// works exactly like removeEventListener
Listener.remove(element, on, callback);

Question 14

আমি কেবল অনুলিপি-সুরক্ষা ওয়ার্ডপ্রেস প্লাগইন সহ একযোগে সমস্যাটি অনুভব করেছি। কোডটি ছিল:

function disableSelection(target){
 if (typeof target.onselectstart!="undefined") //For IE 
  target.onselectstart=function(){return false}
 else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
  target.style.MozUserSelect="none"
 else //All other route (For Opera)
  target.onmousedown=function(){return false}
target.style.cursor = "default"
}

এবং তারপরে এটি আলগাভাবে রেখে শুরু করা হয়েছিল

<script type="text/javascript">disableSelection(document.body)</script>.

আমি কেবল এই ইভেন্টে অন্যান্য বেনামে ফাংশন সংযুক্ত করে এটিকে ঘিরে এসেছি:

document.body.onselectstart = function() { return true; };

Question 15

window.document.onkeydown = function(){};