addeventlistener コールバック関数 - Javascript

addeventlistener　に関数を渡す

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="script2.js"></script>
  <title>sample</title>
</head>
<body>
  <h1>sample</h1>
  <button type="button" id="btn">button</button>
</body>
</html>

script.js

window.onload = function(){
  let btn = document.getElementById("btn");

  function hello(){
    console.log("hello, World");
  }

  btn.addEventListener('click', hello());
}

上記のようなコードだと、意図した動作になりません。

第2引数に、「 hello() 」とすると関数そのものが一度実行されその後は、ボタンをクリックしても動作しません。

ボタンをクリックするたびに、「 hello, world 」とコンソールに表示されるには次のようにします。

script.js

window.onload = function(){
  let btn = document.getElementById("btn");

  function hello(){
    console.log("hello, World");
  }

  btn.addEventListener('click', hello); // change
}

「 btn.addEventListener('click', hello); 」という書き方の場合、hello 関数に引数を渡せません。引数を渡すには次のようにします。

script.js

window.onload = function(){
  let btn = document.getElementById("btn");
  let name = "taro";

  function hello(){
    console.log(`hello, ${this.name}`);
  }
  
  btn.addEventListener('click', {name: name, handleEvent: hello});
}

hello 関数内で引数で渡された値を使うには、this を使います。

次のような場合はどうでしょうか。

script.js

window.onload = function(){
  let btn = document.getElementById("btn");
  let name = "taro";

  function hello(name){
    console.log(name.target.id); // btn
    console.log(`hello, ${this.name}`); // hello, [object PointerEvent]
  }
  
  btn.addEventListener('click', {name: name, handleEvent: hello});
}

hello 関数の生成時に指定した第一引数は、[object PointerEvent] が渡されます。

そのため、上記のようにした場合も意図しない動作になります。

addEventListener に渡す関数を作成する場合には、第１引数には event や e としておいたほうがわかりやすくなります。

script.js

window.onload = function(){
  let btn = document.getElementById("btn");
  let name = "taro";

  function hello(event){
    console.log(`hello, ${this.name}`);
  }
  
  btn.addEventListener('click', {name: name, handleEvent: hello});
}

最後に次のようなコードは外部の変数を読み込んでいるため、場合によっては意図しない結果になります。

script.js

window.onload = function(){
  let btn = document.getElementById("btn");
  let name = "taro";
  let name2 = "jiro";

  function hello(event){
    console.log(`hello, ${name2}`);
  }
  
  btn.addEventListener('click', {name: name, handleEvent: hello});
}

イベントの解除

イベントを解除するには、イベントと関数が一致する必要があります。

window.onload = function(){
  let btn = document.getElementById("btn");

  let hello = function(e){
    console.log("hello, world");
  }
  
  btn.addEventListener('click', hello);
  btn.removeEventListener('click', hello);
}