≪イベント｜Events｜ldap≫

イベントは何が起こったのかの合図です.すべてのDOMノードがこの信号を生成します.

イベントフロー

取得フェーズ-イベントをサブエレメントに伝播するには、

ターゲットステップ-イベントが実際のターゲット要素に渡されるステップ

バブルフェーズ-イベントが親に伝播するフェーズ

[ソース:https://ko.javascript.info/bubbling-and-capturing]
tdタグをクリックして、イベントを最上位の祖先から下へ伝播(キャプチャフェーズ)し、イベントがターゲット要素に到達して実行された後(ターゲットフェーズ)、さらに上へ伝播(バブルフェーズ)します.これにより、要素に割り当てられたイベントハンドラが呼び出されます.

いわゆる泡化

エレメントにイベントが発生すると、エレメントに割り当てられたハンドラが操作され、親エレメントのハンドラが操作されます.このプロシージャは、最上位レベルの親要素に遭遇する前に繰り返し、各要素に割り当てられたハンドルによって操作されます.

アクティブなオブジェクトとは?

アクティビティを処理するには、何が起こったのかを詳しく理解する必要があります.clickイベントが発生した場合、マウスポインタがどこにあるか、keydownイベントが発生したときに押したキーなどの詳細が必要です.これらの情報が含まれているのはアクティブなオブジェクトです.イベントオブジェクトは、イベント発生時にブラウザによって作成され、プロセッサに引数として渡されます.
bundlingでは、イベントオブジェクトが指すcurrentTargetは、現在実行されているプロセッサによって割り当てられた要素を参照する「現在」要素であり、targetは実際のイベントの開始要素を表します.

イベントハンドラとは?

イベントに反応するには、イベントが発生したときに実行される関数という関数を割り当てる必要があります.Handlerはjavascriptコードでユーザの動作にどのように応答するかを表した.
ハンドルを割り当てる方法はいろいろあります.
1.html属性として指定

<script>
  function countRabbits() {
    for(let i=1; i<=3; i++) {
      alert(`토끼 ${i}마리`);
    }
  }
</script>

<input type="button" onclick="countRabbits()" value="토끼를 세봅시다!">

dom属性

に割り当てる

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

しかし、上記のように割り振ると、既存のプロセッサが上書きされることになる.つまり、複数のハンドルを割り当てることはできません.Web規格に参加した開発者はこの問題を認識し,addEventListenerとremoveEventListener法を用いてHandlerを管理しようとした.

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

<script>
  function handler1() {
    alert('감사합니다!');
  };

  function handler2() {
    alert('다시 한번 감사합니다!');
  }

  elem.onclick = () => alert("안녕하세요.");
  elem.addEventListener("click", handler1); // 감사합니다!
  elem.addEventListener("click", handler2); // 다시 한번 감사합니다!
</script>

関連項目:https://ko.javascript.info/introduction-browser-events