[javascript] 응용 기록 5

this

addEventListener에서 this는 이벤트 실행 객체를 의미한다.

 

이벤트 객체

함수가 이벤트 핸들러로 실행이 되면 첫 번째 매개변수 자리에 자동으로 이벤트 객체가 들어온다.

이벤트 객체 - 지금 발생한 이벤트에 대한 정보들을 담고 있는 객체

 

currentTarget

e.currentTarget === this;

내가 지금 클릭한 대상이 아닌 이벤트가 등록되어있는 객체이다.

 

target

내가 지금 클릭한 애를 보여준다. 클릭한 부분에 있는 요소를 잡아낸다.

 

이벤트 위임

for (let i = 0; i < ilbuniGroup.length; i++) {           ilbuniGroup[i].addEventListener("click", clickHandler);         }

for문을 돌리게 되면 용량을 많이 차지해서 속도가 느려지는 문제가 발생한다.

-> 이벤트 위임을 통해 이벤트를 한번만 실행하게 한다.

 

문제점

하지만, 이벤트 위임을 이용하면

이벤트가 발생하면 이벤트 객체가 생성이 되면서 이벤트를 생성한 객체만을 가리키게 된다.

 

해결 방안

이벤트 객체의 target 속성을 이용

target은 내가 직접 찍어낸 요소를 가리키기 때문에 이를 이용하면 이벤트 위임이 가능하다.

 (function () {
        const stage = document.querySelector(".stage");

        function clickHandler(e) {
          stage.removeChild(e.target);
        }

        stage.addEventListener("click", clickHandler);
      })();

 

문제2

배경을 클릭할 경우 'stage에서 removeChild하세요. 누구를? stage를'

내가 removeChild를 자기 자신으로 하려고 하니까 에러가 발생

 

해결2

내가 누른 객체가 특정 클래스를 가지고 있으면 없애는 걸로 변경 > classList.contains( ); 이용