Javascript イベントハンドラの設定について

前提・実現したいこと

Javascript イベントハンドラとして、onmousemoveをあてました。
Javascript イベントハンドラの設定ですが、関数に()をつけないのはなぜか知りたいです。

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

window.document.onmousemove= move();
window.document.onmousemove= move;

1番目の文だと、マウスをうごかしても一回しか、起動しません。
2番目の文だと、マウスをうごかすたびに起動します。

関数は（）が必須と思っていましたが、ちがうのでしょうか？

該当のソースコード


<!DOCTYPE html>
 <html lang="jp" >
  <head>
    <meta charset="utf-8">
     <title>test</title>
  </head>
<body>
  <script type="text/javascript">
   window.document.onmousemove= 'move()';
   // window.document.onmousemove= move();

  function move(){
    console.log(12);
  }
  </script>
</body>
</html>

試したこと

move（）を”　”でくくってはずしたり、’　’でくくったりしました。

補足情報（FW/ツールのバージョンなど）

chromeの最新です。

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

回答3件

ベストアンサー

avascript イベントハンドラの設定ですが、関数に()をつけないのはなぜか知りたいです。

イベントハンドラには、関数そのものを指定しなければなりません（イベントが起きるのに応じて呼び出せる必要があります）。

window.document.onmousemove= move();としてしまうと、この行を実行した瞬間にmove()が実行されて、その結果がonmousemoveに入ることとなります。

投稿2019/07/01 12:29

maisumakun

総合スコア145183

tokkuman

2019/07/01 12:37

早速の回答ありがとうございます。もう少し教えてください。moveが関数とすると、()はいったい何なのでしょうか？　moveとmove()の差とは何か教えていただけませんか？以上よろしくお願いいたします。

maisumakun

2019/07/01 12:41

()は関数を呼び出すための演算子です。move()は「move関数を実行して、その結果（何も返さないのでundefined）を得る」という式なのです。

tokkuman

2019/07/02 13:29

（）が演算子とはわかりませんでした。ありがとうございました。

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

こういうことですので = move()にすると
(function move() { console.log(12); })();に
なって1回しか実行されないため、()は不要です。

// window.document.onmousemove = move;

// function move() {
//   console.log(12);
// }

// 上と同じ動作
window.document.onmousemove = function move() {
  console.log(12);
}

投稿2019/07/01 12:34

編集2019/07/01 12:39

yasutomi

総合スコア2937

tokkuman

2019/07/02 13:27

細かく記載していただきありがとうございました。

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

moveはコールバックだと思えばよいでしょう

javascript
1const move=e=>{console.log(e.type)};
2document.addEventListener('mousemove',move);

javascript
1document.addEventListener('mousemove',e=>{console.log(e.type)});

投稿2019/07/01 12:49

yambejp

総合スコア114829

tokkuman

2019/07/02 13:25

わかりやすい例をありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！