0

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

<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>

2 件の回答 2

1

こんにちは

<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>

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

button.addEventListener('click', click_01, false);
button.addEventListener('click', click_02, false);
button.addEventListener('click', click_03, false);

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

これが

button.addEventListener('click', click_01(), false);
button.addEventListener('click', click_02(), false);
button.addEventListener('click', click_03(), false);

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

0

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

正しくは

  button.addEventListener('click', click_01, false);
  button.addEventListener('click', click_02, false);
  button.addEventListener('click', click_03, false);

です。

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。