114

eventHandlerイベントといくつかのパラメータを渡すを作成したいと思います。問題は、関数が要素を取得しないことです。次に例を示します。

doClick = function(func){
    var elem = .. // the element where it is all about
    elem.onclick = function(e){
        func(e, elem);
    }
}
doClick(function(e, element){
    // do stuff with element and the event
});

は無名関数の外部で定義するelem必要があります。渡された要素を匿名関数内で使用するにはどうすればよいですか？これを行う方法はありますか？

そして、どうaddEventListenerですか？イベントを通過できないようですが、addEventListenerどうですか？

アップデート

'this'で問題を解決したようです

doClick = function(func){
    var that = this;
    this.element.onclick = function(e){
        func(e, that);
    }
}

これに含まれている場合this.element、関数でアクセスできます。

addEventListener

しかし、私は：について疑問に思っていaddEventListenerます：

function doClick(elem, func){
    element.addEventListener('click', func(event, elem), false);
}
4

8 に答える 8

119

コードが何をしようとしているのか正確にはわかりませんが、関数クロージャの利点を使用して、任意のイベントハンドラーで変数を使用できるようにすることができます。

function addClickHandler(elem, arg1, arg2) {
    elem.addEventListener('click', function(e) {
        // in the event handler function here, you can directly refer
        // to arg1 and arg2 from the parent function arguments
    }, false);
}

正確なコーディング状況に応じて、ほとんどの場合、ある種のクロージャーで変数へのアクセスを保持することができます。

あなたのコメントから、あなたが達成しようとしていることがこれであるならば：

element.addEventListener('click', func(event, this.elements[i]))

次に、実行時にクロージャに必要な引数をキャプチャして実際のイベントハンドラ関数を返す自己実行関数（IIFE）を使用してこれを行うことができます。

element.addEventListener('click', (function(passedInElement) {
    return function(e) {func(e, passedInElement); };
}) (this.elements[i]), false);

IIFEがどのように機能するかについての詳細は、以下の他の参考文献を参照してください。

匿名関数内のJavascriptラッピングコード

JavaScriptで即時呼び出し関数式（IIFE）-jQueryを渡す

JavaScriptが無名関数を自己実行するための良いユースケースは何ですか？

この最後のバージョンは、おそらく次のように実行されていることを確認するのが簡単です。

// return our event handler while capturing an argument in the closure
function handleEvent(passedInElement) {
    return function(e) {
        func(e, passedInElement); 
    };
}

element.addEventListener('click', handleEvent(this.elements[i]));

.bind()を使用して、コールバックに引数を追加することもできます。渡す引数はすべて.bind()、コールバック自体が持つ引数の前に追加されます。だから、あなたはこれを行うことができます：

elem.addEventListener('click', function(a1, a2, e) {
    // inside the event handler, you have access to both your arguments
    // and the event object that the event handler passes
}.bind(elem, arg1, arg2));
于 2012-04-03T19:41:07.750 に答える
2

元の質問への更新を考えると、イベント ハンドラーを渡すときにコンテキスト ("this") に問題があるようです。基本は、たとえばここで説明されてい ます http://www.w3schools.com/js/js_function_invocation.asp

あなたの例の単純な作業バージョンは読むことができます

var doClick = function(event, additionalParameter){
    // do stuff with event and this being the triggering event and caller
}

element.addEventListener('click', function(event)
{
  var additionalParameter = ...;
  doClick.call(this, event, additionalParameter );
}, false);

Javascript call() & apply() vs bind()?も参照してください 。

于 2016-06-16T08:48:18.933 に答える
2

簡潔な答え：

x.addEventListener("click", function(e){myfunction(e, param1, param2)});

... 

function myfunction(e, param1, param1) {
    ... 
}
于 2018-12-31T09:57:51.007 に答える
0

this内側doThingsはウィンドウオブジェクトです。代わりにこれを試してください：

var doThings = function (element) {
    var eventHandler = function(ev, func){
        if (element[ev] == undefined) {
            return;
        }

        element[ev] = function(e){
            func(e, element);
        }
    };

    return {
        eventHandler: eventHandler
    };
};
于 2012-04-03T19:50:19.740 に答える