addEventListener - Javascript

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

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

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

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

イベントの伝播

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

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>