6

次のようにイベント ハンドラーをバインドするサンプル コードがあります。

var h1=document.querySelector('h1');
h1.onclick=doit;

function doit(x) {
        console.log(x);
}

イベント ハンドラーが (h1要素をクリックして) トリガーされると、期待どおり、出力はeventオブジェクトになります。

次のようにイベントハンドラーをバインドすると:

h1.onclick=doit.bind(h1);

同じ結果が得られます。

ただし、次のようにバインドすると:

h1.onclick=doit.bind(h1,1);

1の後の最初のパラメーターを取得しますh1。いずれの場合も、 の値thisは に正しく設定されてh1いますが、最後のケースでは、渡されたパラメーターが予想されるイベント オブジェクトを置き換えているように見えます。

イベント ハンドラを関数式として書き換えずにイベント オブジェクトを保持するにはどうすればよいですか?

4

2 に答える 2

0

このリンクをチェックすると、最初の引数の後の引数が関数に渡される最初の引数になることがわかります。

h1 要素だけで呼び出す場合は、関数をその h1 要素にバインドするだけです。その 2 番目のパラメーターに他の何かを渡すと、関数に渡される最初の引数になります。

例

function testing(a, b, c) {
  console.log(this.property, a, b, c);
}

var obj = {
  property: 'value!'
};

var bound_test = testing.bind(obj, 'Bound Test A');
bound_test('test 1', 'checking console output');
bound_test() // should give two undefined in console since we are only giving the first object.

var bound2_test = testing.bind(obj, 'Bound test B', 'something ');
bound2_test('this will be the "c" argument');

var bound3_test = testing.bind(obj, 'Bound test C', 'Test', ' another, yet different test.');
bound3_test();

于 2016-05-26T01:53:25.163 に答える