addEventListener 위임에 대해서

<div class="wrap">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
</div>

위와 같은 html 구조가 있다고 할 때

 

box1, box2 box3 에 addEventListener를 붙일려고 하면 아래와 같이 붙일 수 있는데

<script>

const boxs = document.querySelectorAll(".box");

for (int i = 0; i<boxs.length; i++) {
	boxs[i].addEventListener("click", function () {
    console.log(this);
});

</script>

이렇게 각 box에 일일히 addEventListener붙이면 객체가 늘어날 수록 성능상으로 안좋기 때문에😫,

addEventListener 위임을 적용하여 개선 시킬 수 있는데

addEventListener 위임을 적용하면 아래와 같다.

<script>

const wrap = document.querySelector(".wrap");

wrap.addEventListener("click", function (e) {
    console.log(e.target);

</script>

 

addEventListener에 실행파라미터에 함수를 넣을 때 함수 파라미터에는 자동으로 event 객체가 들어가게 된다

(난 줄여서 e로 씀)

 

이 event 객체에는 e.currentTarget 과 e.target이 있는데 

e.currentTarget 은 this와 같고, addEventListener를 붙인 그 객체를 의미하게 된다.

 

e.target은 마우스로 클릭한 그 객체를 가져오는데,

wrap 안에 box 클래스를 클릭하게 되면 box 클래스 객체를 가져오게 된다.

 

따라서 addEventListener 위임이란, 내가 이벤트리스너를 붙일 그 객체들에 부모객체 에 addEventListener를 주고 나서

e.target을 통한 필요한 객체를 가져오는 것을 말한다.😃

 

추가 Info ✨

<div class="wrap">
    <div class="box box1">box1
    	<p>first question</p>
    </div>
</div>

box 클래스 안에 p 태그가 있고 p 텍스트를 클릭하게 되면 e.target은 p 객체를 가져오게 된다.

 

만약 개발자가 wrap 안에 box클래스 안에  p태그, image 태그 같은게 들어있든 말든,

wrap 바로 아래 자손인 box 클래스만 가져오고 싶다면

<style>
 .p-text {
    	pointer-events:none;
    }
</style>


<div class="wrap">
    <div class="box box1">box1
    	<p class="p-text">first question</p>
    </div>
</div>

클래스를 준 후에 css로 pointer-events 속성을 줘서 특정 클래스들은 이벤트리스너의 효과를 안받게 바꿔줘서 해결할 수 있다. (pointer-events 속성은 하위까지 전파되니 유의 ✔)