<javascript第11話:イベント–Bubbling、キャプチャ、委任>

ユーザがボタンをクリックした特定のイベントをイベントと呼び、イベントが検出された後に呼び出されるカスタム関数をイベントハンドラと呼ぶ.

イベントの種類はどれらがありますか?
代表的なのはmouseup - 마우스 버튼을 뗄 때, click, keyup - 키보드의 키를 아무거나 누르고 있다가 뗐을 때, load -모두 로딩이 끝났을 때 등등で、「アクティビティタイプ」と呼ばれています.

では、イベントハンドラはどのように使用しますか?
まず登録し、2つ目の方法は最も推奨され、最も使用されています.

イベントハンドラ構成-DOM構成に

を登録する.

<input id="elem" type="button" value="클릭해 주세요.">
<script>
  elem.onclick = function() {
    alert('감사합니다.');
  };
</script>

addEventListenerメソッド

<button id="elem">클릭해 주세요.</button>

<script>
  class Menu {
    handleEvent(event) {
      switch(event.type) {
        case 'mousedown':
          elem.innerHTML = "마우스 버튼을 눌렀습니다.";
          break;
        case 'mouseup':
          elem.innerHTML += " 그리고 버튼을 뗐습니다.";
          break;
      }
    }
  }

  let menu = new Menu();
  elem.addEventListener('mousedown', menu);
  elem.addEventListener('mouseup', menu);
</script>

ネストされた要素がそれぞれのイベントハンドラを有する場合、ブラウザ定義の順序가장 바깥쪽 요소 -> 가장 안쪽 요소 - 이벤트를 감지당한 장본인 -> 가장 바깥쪽 요소に従って実行される.この場合、外部要素(親要素)から最内部要素(子要素)へのプロセスを「キャプチャ」、内部から外部要素へのプロセスを「bubbling」と呼びます.html要素のイベント検出順序は、別途設定しない限りbundleに従います.ただし、キャプチャ方式を採用したい場合、つまり、イベントが発生した元凶をDOMの宛先として使用する場合は、addEventListenerの3番目のパラメータ(キャプチャオプション)を使用してtrueを渡すことができます.

これはいったい何のために使われているのですか.
これは委任アクティビティのプロセスです.たとえば、サブエレメントの数が動的に決定されている場合は、単純なソリューションであるイベントハンドラを1つずつ登録/削除する必要があります.