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 속성은 하위까지 전파되니 유의 ✔)