１つのイベントに複数のイベントリスナを登録してみよう #JavaScript

はじめに

『独習JavaScript』第２版を読んでいます。１つのイベントに複数のイベントリスナを登録することができるというのがよく理解できなかったので、手を動かしながら学んでみました。

この記事では、使用したファイルを紹介します。index.htmlとapp.jsを同じディレクトリに置いて、index.htmlを開くと、つぎのようなものが表示されると思います。

ファイル

使用したファイルは２ファイルです。

index.html
app.js

index.htmlを見てみます。特に目新しいものはありません。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="app.js"></script>
</head>
<body>
  <div id="around" style="width: 100px; height: 100px; background-color: chocolate">
    <div id="hello" style="position: absolute; top: 25px; left: 25px; width: 50px; height: 50px; background-color: yellow">hello</div>
  </div>
</body>
</html>

つぎに、app.jsを見てみます。１つのイベントに複数のイベントリスナを登録しています。

app.js

function assert(bool) {
  if (!bool) alert("warning");
}

var count = 0;
function logTarget(e) {
  console.log(count + ": target: " + e.target.id +
              ", currentTarget: " + e.currentTarget.id +
              ", eventPhase: " + e.eventPhase +
              ", bubbles: " + e.bubbles +
              ", cancelable: " + e.cancelable);
  count++;
}

function changeRed(e) {
  logTarget(e);
  this.style["background-color"] = "red";
}

function changeBlue(e) {
  logTarget(e);
  this.style["background-color"] = "blue";
}

function changeYellow(e) {
  logTarget(e);
  this.style["background-color"] = "yellow";
}

function changeAzure(e) {
  // e.stopPropagation();
  logTarget(e);
  this.style["background-color"] = "azure";
}

function changeChocolate(e) {
  // e.stopPropagation();
  logTarget(e);
  this.style["background-color"] = "chocolate";
}

function changePurple(e) {
  // e.stopPropagation();
  logTarget(e);
  this.style["background-color"] = "steelblue";
}

function changeText1(e) {
  logTarget(e);
  this.innerText = "world";
}

function changeText2(e) {
  logTarget(e);
  this.innerText = "hello";
}

window.onload = function () {
  var elem1 = document.getElementById('hello');
  elem1.addEventListener('click', changeRed, false);
  elem1.addEventListener('mouseover', changeYellow, false);
  elem1.addEventListener('mouseover', changeText1, false);
  elem1.addEventListener('mouseout', changeBlue, false);
  elem1.addEventListener('mouseout', changeText2, false);
  var elem2 = document.getElementById('around');
  elem2.addEventListener('click', changeAzure, true);
  elem2.addEventListener('mouseover', changeChocolate, true);
  elem2.addEventListener('mouseout', changePurple, true);
};

少し説明を補足します。

addEventListenerの第３引数にtrueを指定すると、キャプチャフェーズのイベントを捕捉し、falseを指定すると、バブリングフェーズのイベントを捕捉するとのことです。

stopPropagation()は「キャプチャフェーズにおいて親要素でイベントを横取りするような場合に使用すると効果的」とのことです。

ついでに、stopPropagation()も学ぶことができました。(余談ですが、『独習JavaScript』第２版P328の表8.8のisPropagationStopped()の説明がstopPropagetion()の説明と同じでした。)

まとめ

１つのイベントに複数のイベントリスナを登録できることを確認しました。preventDefault()とstopPropagation()の違いがよく分かっていなかったのですが、手を動かしたことによってその違いを整理できたと思います。