addEventListener

「 addEventListener 」は、さまざまなイベント処理を実行することができるメソッドです。

構文

addEventListener(type, listener, useCapture)

addEventListener()の引数はそれぞれ次のような意味になります。

引数	内容
type	イベントの種類
listener	コールバック関数
useCapture	イベント伝搬の方式

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  
</body>
</html>

script.js

window.addEventListener('load', ()=>{
  alert("Hello, World");
})

指定できるイベントの種類

引数に指定されるイベントの種類には次のようなものがあります。

mdn web docs - イベントリファレンス

load
change
scroll
select
click
keyup
keydown
mousemove
mouseover
touchstart
touchmove
touchend
submit

セレクトメニューの値を取得

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <form action="" name="myform">
    <div>
      <select name="address" id="address">
        <option value="">選択してください</option>
        <option value="東京">東京</option>
        <option value="大阪">大阪</option>
        <option value="福岡">福岡</option>
      </select>
    </div>
  </form>
</body>
</html>

script.js

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

  address.addEventListener('change', function(){
    
    let idx = address.selectedIndex;
    let seltxt = address.options[idx].value;
    console.log(seltxt);
  });
};

preventDefault()

ターゲットの要素が持つデフォルトの動作をキャンセルできます。

e.preventDefault() がなければ、a要素にsrc属性に#を指定しているため、a要素をクリックするとトップの表示になります。

e.preventDefault() を記述した場合は、a要素をクリックしてもトップの表示にはならず、コンソールに「 Hello 」とだけ表示されます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="box"></div>
  <p><a id="target" href="#">link</a></p>
</body>
</html>

style.css

#box {
  height: 2000px;
}

script.js

window.onload = function(){
  let target = document.getElementById('target');

  target.addEventListener('click', function(e){
    e.preventDefault();
    console.log("Hello");
  });
}

イベントの伝播

イベントは、親子関係にある子要素のイベントを実行すると、親要素のイベントも実行します。

W3C - Event dispatch and DOM event flow

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="parent">
    <h1>parent</h1>
    <div id="child">
      <h2>child</h2>
    </div>
  </div>
</body>

同じイベントリスナを登録した子要素をクリックすると親要素のイベントも実行されます。

script.js

window.onload = function(){
  let parent = document.getElementById('parent');
  let child = document.getElementById('child');

  parent.addEventListener('click', function(){
    console.log("parent");
  });
  child.addEventListener('click', function(){
    console.log("child");
  });
}

親子関係にある親要素に伝播しないようにするには、「 e.stopPropagation() 」を使います。

window.onload = function(){
  let parent = document.getElementById('parent');
  let child = document.getElementById('child');

  parent.addEventListener('click', function(){
    console.log("parent");
  });
  child.addEventListener('click', function(e){
    e.stopPropagation();
    console.log("child");
  });
}

直前の親要素だけでなく、親子関係がある要素をさかのぼって伝播します。

次のような場合もイベントの伝播が起きます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="grandparent">
    <h1>grandparent</h1>
    <div id="parent">
      <h1>parent</h1>
      <div id="child">
        <h2>child</h2>
      </div>
    </div>
  </div>
</body>
</html>

script.js

window.onload = function(){
  let grandparent = document.getElementById('grandparent');
  let child = document.getElementById('child');

  grandparent.addEventListener('click', function(){
    console.log("grandparent");
  });
  child.addEventListener('click', function(e){
    console.log("child");
  });
}

次の場合は、grandparent と child が親子関係にないため、次の場合は、grandparent のイベントは実行されません。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="grandparent">
    <h1>grandparent</h1>
  </div>
  <div id="parent">
    <h1>parent</h1>
    <div id="child">
      <h2>child</h2>
    </div>
  </div>
</body>
</html>

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);
}