JavaScript 14. DOMContentLoadedイベント/ターゲット、currentTarget

DOMContentLoaded

ドームツリーの構成が完了したときに発生するイベント
DOMContentLoadedイベントを使用して、まずDOMツリーを構成してから実行するので、HTMLの前にJavaScriptを作成しても実行に問題はありません.

document.addEventListener('DOMContentLoaded', function(){
	모든 js 코드 입력 
});

target / currentTarget

target:実際のイベントが発生した要素(クリックしたタグに戻る)

currenTarget:登録されたイベントの要素(適用されたイベントのタグを返す)

<div class="box">
   <p>box<p>
</div>

<script>
   let myBox = document.getElementById('.box');
    
    myBox.addEventListener('click',function(e){
    	console.log('currentTarget : ',e.currentTarget);
        console.log('Target :',e.target);
    });
</script>

CurrentTargetは登録されたイベントのdivを返し、targetはイベントが発生したpタグを返す.