Javascript Event handling

Html操作のスクリプトを作成する場合、必要な場所でイベントを割り当てたり制御したりするのは難しいことが多い.

<form onclick="alert('form')">
	FORM
  <div onclick="alert('div')">
  	DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

HTMLタグを表示すると、form>div>pの関係が表示されます.
では、pタグをクリックすると何が起こるのでしょうか.
p=>div=>form.
様々な活動が一緒に分布すれば、想像とは異なる活動が起こり得る.

JavascriptイベントBubbling(イベントBubbling)

上記の例はイベントbundlingの例です.
pタグのイベントを実行しようとしたが、親タグdivとdivの親タグformの順序で実行される形式である.
各ラベルに割り当てられたイベントは、親ラベルに移動して探索する形式です.

イベントのキャプチャ

Bubblingとは逆に、親ラベルから子ラベルまで、イベントハンドルをナビゲートして実行する方法です.

ぼうほう

event.stopPropagation()
bundlingは無効ですが、他のイベントハンドラの実行は阻止できません.
event.stopImmedatePropagation()を使用してブロックします.
**阻止は推奨されません.イベントはelementに配置され、終了できないため、他のグローバルイベントハンドラの実行を阻止できます.
ex)Windowsラベルにバンドルされたユーザーモード分析イベントハンドラ

Event Target Method

現在発生しているイベントのターゲット要素を正確に特定できます.bundlingによって値は変更されません.
Handlerコールバックではこれとは少し違います.
これは、現在のイベントハンドラを実行する要素、イベントです.targetはアクティビティの開始のターゲット要素となります.
親ラベルで目標に応じて変化すれば、わかりやすいです.
出典:Javascript.info