

Javascriptのイベントリスナーについて勉強中です。  
下記のソースコードのようにclick_01()、click_02()、click_03()とすると、ボタンを押していないのに「ボタンがクリックされました。」の表示が出てしまいます。なぜでしょうか。

[code]

    <body>
    <input id="Button1" type="button" value="button" />
    <input id="Text1" type="text" />
    <div id="output"></div>
    <script type="text/javascript">
    window.onload = function () {
      var button = document.getElementById("Button1");
      button.addEventListener('click', click_01(), false);
      button.addEventListener('click', click_02(), false);
      button.addEventListener('click', click_03(), false);
    }
    
    function click_01() {
      var text = document.getElementById("Text1");
      text.value = "ボタンがクリックされました。";
    }
    function click_02() {
      var text = document.getElementById("output");
      text.innerHTML = "ボタンがクリックされました。";
    }
    function click_03() {
      window.top.document.title = "ボタンがクリックされました。";
    }
    </script>
    </body>
    
[/code]


CC BY-SA 3.0
2018-03-31T02:32:11.123
42815
2018-03-31T04:13:16.377
17348
question
javascript
イベントリスナーについて。


よくやりがちなミスです。

正しくは

[code]

      button.addEventListener('click', click_01, false);
      button.addEventListener('click', click_02, false);
      button.addEventListener('click', click_03, false);
    
[/code]

です。

`click_01()` は 括弧があるので、関数呼び出しになってしまっているのです。


CC BY-SA 3.0
2018-03-31T04:11:14.847
42819
2018-03-31T04:11:14.847
9008
42815
answer


こんにちは

[code]

    <body>
    <input id="Button1" type="button" value="button" />
    <input id="Text1" type="text" />
    <div id="output"></div>
    <script type="text/javascript">
    window.onload = function () {
      var button = document.getElementById("Button1");
      button.addEventListener('click', click_01, false);
      button.addEventListener('click', click_02, false);
      button.addEventListener('click', click_03, false);
    }
    
    function click_01() {
      var text = document.getElementById("Text1");
      text.value = "ボタンがクリックされました。";
    }
    function click_02() {
      var text = document.getElementById("output");
      text.innerHTML = "ボタンがクリックされました。";
    }
    function click_03() {
      window.top.document.title = "ボタンがクリックされました。";
    }
    </script>
    </body>
    
[/code]

このようにすると期待されたように動くはずです。

[code]

    button.addEventListener('click', click_01, false);
    button.addEventListener('click', click_02, false);
    button.addEventListener('click', click_03, false);
    
[/code]

この部分が重要でbuttonにclickイベントが来た時に呼び出す関数として二番目の引数にある`click_0n`を登録するということです。

これが

[code]

    button.addEventListener('click', click_01(), false);
    button.addEventListener('click', click_02(), false);
    button.addEventListener('click', click_03(), false);
    
[/code]

のようになっているとbuttonにclickイベントが来た時に呼び出す関数の登録に`click_0n()`の戻り値を使うようになってしまいます。


CC BY-SA 3.0
2018-03-31T04:13:16.377
42820
2018-03-31T04:13:16.377
14222
42815
answer