function関数の最後の方についているfalseの役割について教えていただきたいです。

関数の最後についているfalseの役割を教えていただきたいです。
未熟ですがよろしくお願いします。

javascript
1inputfile.addEventListener(
2  "change",
3  function (e) {
4    let file = e.target.files;
5    let reader = new FileReader();
6    console.log(reader);
7    reader.readAsDataURL(file[0]);
8    reader.onload = function () {
9      video.src = reader.result;
10      dlc.href = reader.result; //<a>のhref要素にURLを代入
11    };
12  },
13  false
14);

think49

2020/10/25 01:33

inputfile.addEventListener() を使っていながら、reader.onload が addEventListener ではないのは何か理由があるのでしょうか。

nanase1212

2020/10/25 02:36

reader.onloadの部分は自分なりに付け加えてみたものなのですが、addEventListennerでも可能なのでしょうか。ご教授いただけると幸いです。

think49

2020/10/25 02:42

addEventListenerはイベント全般に適用出来ます。 https://developer.mozilla.org/ja/docs/Web/API/FileReader https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

nanase1212

2020/10/25 05:11

理解するのが難しいのですが、私のコードよりも簡潔に書く方法があるという解釈でよろしいでしょうか。もし、お時間があるようでしたらどのような書き方をすると簡潔化できるのでしょうか。ご教授お願いします。

think49

2020/10/25 06:25

質問のコードは下記コードと変わりありません。 inputfile.onchange = function (e) { /*省略*/ }; onchangeがchangeイベントを表す事は見て取れます。 onloadも同じです。

think49

2020/10/25 06:27

「addEventListenerの第一引数/第二引数」と「inputfile.addEventListener」のinputfileにも注意して、資料に目を通してください。第三引数しか見てないのが良くないと思います。

nanase1212

2020/10/26 11:30

なるほど... 御丁寧にありがとうございます。勉強になりました。

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

回答2件

ベストアンサー

addEventListener

useCapture Optional

Boolean 値で、この型のイベントが、DOM ツリー内の下の EventTarget に配信される前に、登録された listener に配信されるかどうかを示します。ツリーを上方向にバブリングしているイベントは、キャプチャーを使用するように指定されたリスナーを起動しません。イベントのバブリングとキャプチャーは、両方の要素がそのイベントのハンドラーを登録している場合に、別の要素内に入れ子になっている要素で発生するイベントを伝播する 2 つの方法です。イベント伝播モードは、要素がイベントを受け取る順番を決定します。詳細な説明は DOM Level 3 Events と JavaScript Event order を参照してください。指定されていない場合、 useCapture は既定で false となります。

投稿2020/10/25 01:14

gentaro

総合スコア8947

nanase1212

2020/10/25 02:38

ありがとうございます。参考になりました。

gentaro

2020/10/25 14:54

解決したのならクローズしてください。

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

function関数の

いえ、EventTarget.addEventListener()の引数かと思います。

 inputfile.addEventListener(
  "change", // Param 1
  function (e) { // Param 2
  },
  false // Param 3
);

構文：target.addEventListener(type, listener [, options]);

options Optional

capture
Boolean 値で、この型のイベントが DOM ツリーで下に位置する EventTarget に配信される前に、登録された listener に配信されることを示します。
once
Boolean 値で、 listener の呼び出しを一回のみのとしたいかどうかを値で指定します。 true を指定すると、 listener は一度実行された時に自動的に削除されます。
passive
Boolean 値で、 true ならば、 listener で指定された関数が preventDefault() を呼び出さないことを示します。呼び出されたリスナーが preventDefault() を呼び出すと、ユーザーエージェントは何もせず、コンソールに警告を出力します。詳細はパッシブリスナーによるスクロール性能の改善をご覧ください。
mozSystemGroup
Boolean 値で、リスナーをシステムグループに追加するべきであることを示します。コードが XBL または Firefox ブラウザーの chrome で実行されている場合のみ利用できます。

投稿2020/10/25 01:14

編集2020/10/25 01:17

m.ts10806

総合スコア80875

think49

2020/10/25 05:44 編集

+5評価ついてる回答に指摘するのもなんですが…。私は引用箇所としては、gentaroさんの回答が正解で、m.ts10806さんの回答は不正解と思います。 m.ts10806さんの回答に準じたコードは下記になります。 inputfile.addEventListener("change", listener, {capture: false}); これは比較的新しい仕様で、ブラウザの互換性に注意が必要になります。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Browser_compatibility

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

あなたの回答