이벤트 클릭시 중복 해제?

Question

.wrap{display: flex;} .box{width:100px; line-height:100px; background: #eee; margin-right:10px; text-align: center;} /*클릭시*/ .bg, .bg1{background:orange;}

1

2

3

4

5

const wrap = document.querySelectorAll('.box') wrap.forEach( (box) => { box.addEventListener('click', function(){ this.classList.add('bg') }) });box를 클릭하면 bg 나오게 만들었는데 다시 box를 누르면 bg를 없애고 싶은데..removeeventlistener이걸 쓰면 bg색이 안지워 져요..

BearHumanS · Answer

엄..저도 공부하는 입장이라 조심스러운데 classList.add 대신에 classList.toggle을 쓰면 간단하게 온오프 가능할거 같습니다.

shintwl · Answer

removeeventlistener는 bg를 지워주는게 아니라해당 엘리먼트에 걸려있던 이벤트에 따른 함수 작동을 해제하는 것입니다(https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener )즉, bg 클래스를 추가하는 함수가 호출되지 않도록 하는 것이죠작성자님이 원하시는 대로 구현하려면this.classList로 해당 엘리먼트에 달린 클래스들을 가져온 다음에bg가 있으면 bg 클래스를 제거하고,bg가 없으면 bg 클래스를 추가하는 방식이 되어야 할 것 같습니다.(https://developer.mozilla.org/ko/docs/Web/API/Element/classList )

큰붕어빵 · Answer

다른 분이 말씀하신 것처럼 this.classList.add('bg'); 대신에 this.classList.toggle('bg'); 이걸 쓰시면 됩니다.아니면 contains()를 이용해서 해당 클래스가 있는지 체크해서 add랑 remove를 사용해도 됩니다.this.classList.contains('bg') == true ? this.classList.remove('bg') : this.classList.add('bg');

이벤트 클릭시 중복 해제?

3개의 답변

Q&A 목록