EventTarget(은)는

EventTarget은 이벤트의 타켓트가 되는 오브제크트입니다.
이벤트리스나의 登録や削除を行えmas.

EventTarget의메삭드

addEventListener - 이벤트리스나의 登録

addEventListenerの第1引数에 이벤트의 이름은,
第2引数에 이벤트発生時에実行する関数を指定する事でいベntの登録が行なえmas.

例えば、crikk의 이벤토는 以下のように登録できmas.
버튼Aを크리크스루와div要素의크리크이벤트も呼び出され마스.

<div id="outer">
  <div id="inner">
    <button id="buttonA">A</button>
  </div>
</div>

document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(){console.log('inner');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA buttonA2 inner outer

第3引数としてbooleanを指定可能で、上記는 falseを指定した以下と同様입니다.

document.getElementById('outer').addEventListener('click',function(){console.log('outer');},false);
document.getElementById('inner').addEventListener('click',function(){console.log('inner');},false);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');},false);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');},false);
//buttonAをクリックする => buttonA buttonA2 inner outer

第3引数としてtrueを指定すると、実行の順序が逆에 なります.

document.getElementById('outer').addEventListener('click',function(){console.log('outer');},true);
document.getElementById('inner').addEventListener('click',function(){console.log('inner');},true);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');},true);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');},true);
//buttonAをクリックする => outer inner buttonA buttonA2

이벤트리스나-が登録されていると、이벤트発生元となた要素を含む親の要素でもそのいベentが実行され마스.
そのイベントの実行順序が3つ目の引数で制御できるようになっています.

イベントの伝播은 window오브제크트로부터 イベnt発生元まで下位へ辿っていくCAPCHAFEーZ와、
イベnt発生元から上位要素へと辿ってい구바브링페즈があり마스.
つmari、「outer -> inner -> buttonA -> inner -> outer」の順序でいベントが伝播し、
前半が캐프챠페즈, 後半が바브링페즈와 ています.
引数をtrue とするとベントが実行されるため順序が逆となたというわけ입니다.

もちろん混在も可能で、次のようにすると「outer -> buttonA -> inner」と実行がされ마스.

document.getElementById('outer').addEventListener('click',function(){console.log('outer');},true);
document.getElementById('inner').addEventListener('click',function(){console.log('inner');},false);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => outer buttonA buttonA2 inner 

イベntの伝播은 stopPropagation() 이다 止める事ができ마스.

document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(e){console.log('inner');e.stopPropagation();});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA buttonA2 inner

ただし、stopPropagation()だと同じ要素に登録したRISNA-の実行은 止められません.

document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(){console.log('inner');});
document.getElementById('buttonA').addEventListener('click',function(e){console.log('buttonA');e.stopPropagation();});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA buttonA2

同じ要素のRISNAーも含め、いベntの実行を止めるには、stopImmediatePropagation()を使い마스.

document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(){console.log('inner');});
document.getElementById('buttonA').addEventListener('click',function(e){console.log('buttonA');e.stopPropagation();});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA

既定の動作、例えばchekbockscrick時のcheckを止めたい場合はpreventDefault()로 処理を停止でき마스.

<label><input id="check" type="checkbox" />Check</label>

document.getElementById('check').addEventListener('click',function(e){e.preventDefault();});

addEventListener의 第 3引数 에 는, より複雑인 OBJECKTO をOPSION として指定する事もでき 마스.

document.getElementById('outer').addEventListener('click',function(e){console.log('outer');e.preventDefault();},{
  capture : true , once : true,　passive :false,
});
document.getElementById('inner').addEventListener('click',function(e){console.log('inner');e.preventDefault();},{
  capture : true , once : true,  passive :true,
});
document.getElementById('buttonA').addEventListener('click',function(e){console.log('buttonA');e.preventDefault();},{
  capture : true , once : false, passive :false,
});
//buttonAをクリックする(1回目) => outer inner (警告) buttonA
//buttonAをクリックする(2回目) => buttonA

「capture」는 第3引数에 boolean(を指定したときと同じもの이다.
「한번」은 참의 場合、이벤트의 実行を1回行うとrisna는 削除사레마스.
「passive」는trueの場合、preventDefault()がRISNA로 呼ばれるとconso-ru에 警告が出力され마스.

removeEventListener - 이벤트리스나의 削除

removeEventListenerを使うと、指定したいベntからrisnaを削除でき마스.

<div id="outer">
  <div id="inner">
    <button id="buttonA">A</button>
  </div>
</div>

const clickListener1 = function(){console.log('buttonA1');};
const clickListener2 = function(){console.log('buttonA2');};
document.getElementById('buttonA').addEventListener('click',clickListener1);
document.getElementById('buttonA').addEventListener('click',clickListener2);
document.getElementById('buttonA').removeEventListener('click',clickListener1);
//buttonAをクリックする => buttonA2

第2引数を指定すると、CAPCHAFEーZで実行されるrisnaであるかが一致する場合にだけ削除が行われmas.

const clickListener1 = function(){console.log('buttonA1');};
const clickListener2 = function(){console.log('buttonA2');};
document.getElementById('buttonA').addEventListener('click',clickListener1,false);
document.getElementById('buttonA').addEventListener('click',clickListener2,true);
document.getElementById('buttonA').removeEventListener('click',clickListener1,false);
document.getElementById('buttonA').removeEventListener('click',clickListener2,false);
//buttonAをクリックする => buttonA2