onclick関数であるイベントリスナー/ onclickを削除します。

Question

onclickによって呼び出される関数と同じ関数でイベントリスナーを削除しようとしています。

次の例は、私の問題を示しています。私がその種の構造を使用しようとしているのは、ビューオブジェクトに関数を渡して、それをonclick関数を作成された要素に追加できるようにするためです。

"use strict"; 

// Do I need var fun = function()... here or I could use only function fun() { ....}? 
var fun = function(obj, num) { 
    alert(obj.id + ' ' + num); 
    obj.onclick = ""; // Version 1. This seems to work 
    //obj.removeEventListener('click',); // Version 2. What should I add after the comma to remove EventListener? 

} 

setFn(fun); 

function setFn(fn) { 

    var funct = fn; 

    var val = 10; 
    var elem = document.getElementById('test'); 
    // The next function works with and without return. What are the differences? Are there any possible memory leaks? 
    elem.onclick = function() { funct(this, 11); }; // Version 1. Why in this case 'this' is not referring to the global 'window'? 
    //elem.addEventListener('click', function() {funct(this, val); }); // Version 2. 
} 

ありがとうございます。

Answer 1

イベントリスナーを削除するには、追加したのとまったく同じ機能を渡す必要があります。

"use strict"; 

var fun = function(obj, num, originalEventHandler) { 
    alert(obj.id + ' ' + num); 
    obj.removeEventListener('click', originalEventHandler); 
} 

function setFn(fn) { 
    var element = document.getElementById('test'); 

    element.addEventListener('click', function eventHandler() { 
    fn(this, 11, eventHandler); 
    }); 
} 

setFn(fun); 

これは動作するはずです。

Answer 2

このようにすることはできません。バージョン2の.addEventListener()に渡された匿名関数への参照はないため、削除することはできません。

1つの可能性は、現在の無名関数に名前を付けて、それを第3引数としてfunctに渡すことです。

elem.addEventListener('click', function f() {funct(this, val, f); }); 

次に、funを使用してリスナーを削除できます。

var fun = function(obj, num, bound_fn) { 
    alert(obj.id + ' ' + num); 
    if (bound_fn) { 
    obj.removeEventListener('click', bound_fn); 
    } 
}