jQueryの無名関数に2つめの引数が渡らない

前提・実現したいこと

jQueryを用いて、音声ファイルが読み込まれたらとある処理を行う事になります。

発生している問題・エラーメッセージ

undefind

該当のソースコード

for (i=0; i<10; i++)
{
      audio[i] = document.getElementById(audioMore[i]);
      var hiki = document.getElementById(audioMore[i]);
      var area = json[i].id;
      console.log(area);
      audio[i].addEventListener('loadedmetadata',function(hiki, area) {
        console.log(area);
        var minute = Math.floor(hiki.srcElement.duration/60);
        minute = ( '00' + minute ).slice( -2 ); // 先頭に0を足してから2桁に整形
        var sec = Math.floor(hiki.srcElement.duration%60);
        sec = ( '00' + sec ).slice( -2 );
        $(area).text(minute + ':' + sec);
      });
}

4行目の area にはちゃんと数値が入るのですが、 audio[i].addEventListener('loadedmetadata',function(hiki, area) { 内のコンソールログでは undefind になってしまいます。
スコープ関連か何かと思ったのですがうまくいきません。

試したこと

引数を文字列を変更してみたり、直接文字列を入れたりしてみましたが、うまくいきませんでした。
回答が思いつく方、よろしくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

addEventListenerで登録した匿名関数(リスナ関数)を呼び出しているのはあなたではありません.

WEBブラウザがloadedmetadataイベントの発生を元に非同期的にリスナ関数を呼び出しているのであり, その際の第一引数にEventオブジェクトを渡すことになっているのです.

つまり, リスナ関数の引数(hiki,area等)に勝手に意味付けをすることは出来ません.

ですが, リスナ関数に対しbindメソッドを用いると**関数を束縛する(パラメータが固定された関数を生成する)**ことが可能です. 従って, 次のようにすればリスナ関数に自由にパラメータを渡すことが可能となります.

JavaScript
1for (i=0; i<10; i++)
2{
3      audio[i] = document.getElementById(audioMore[i]);
4      var hiki = document.getElementById(audioMore[i]);
5      var area = json[i].id;
6      console.log(area);
7      audio[i].addEventListener('loadedmetadata',function(hiki, area, e) {//
8        console.log(area);
9        var minute = Math.floor(hiki.srcElement.duration/60);
10        minute = ( '00' + minute ).slice( -2 ); // 先頭に0を足してから2桁に整形
11        var sec = Math.floor(hiki.srcElement.duration%60);
12        sec = ( '00' + sec ).slice( -2 );
13        $(area).text(minute + ':' + sec);
14      }.bind(null, hiki, area));//関数を束縛する(パラメータ設定済みの関数を生成する)
15}
16