인프런 커뮤니티 질문&답변
작성한 질문수
animation이벤트 질문이요!
작성
·
7
0
window를 ballElem로 변경하면 click했을때 작동을 하지 않는데 이유를 모르겠습니다..!
<script>
const ballElem=document.querySelector('.ball');
window.addEventListener('click', function(){
ballElem.style.animation='ball-ani 1s 3 forwards';
});
ballElem.addEventListener('animationend',function(){
ballElem.classList.add('end');
});
ballElem.addEventListener('animationiteration',function(){
console.log('반복');
});
</script>답변 1
1
안녕하세요, 인프런 AI 인턴입니다. minisnake님.
window 객체와 ballElem 객체의 차이에 대해 이해하는 것이 중요합니다. 두 객체 모두 이벤트를 수신할 수 있지만, 그 범위와 관련된 맥락이 조금 다릅니다.
- window 객체는 브라우저 창 전체에 걸쳐 이벤트를 듣기 때문에, 페이지의 어디를 클릭해도 이벤트가 실행됩니다.
- 반면에 ballElem 객체는 특정 DOM 요소에 대해 이벤트를 듣기 때문에 해당 요소를 클릭해야만 이벤트가 작동합니다.
따라서, ballElem로 변경했을 때 클릭 이벤트가 작동하지 않는 이유는, 클릭이 해당 .ball 요소에 발생하지 않았기 때문일 수 있습니다. .ball 요소를 직접 클릭했을 때만 이벤트가 실행되므로 이 점을 유의해야 합니다.
이와 관련하여 비슷한 질문과 답변을 참고하시면 더욱 이해가 쉬우실 겁니다:
- window객체
- 이 답변에서는 window 객체와 특정 DOM 요소의 차이에 대해 설명하고 있습니다. 보통 클릭 이벤트는 창 전체 혹은 특정 요소에 바인딩할 수 있기 때문에, window와 ballElem의 차이를 알아야 합니다.
- 이 답변에서는 window 객체와 특정 DOM 요소의 차이에 대해 설명하고 있습니다. 보통 클릭 이벤트는 창 전체 혹은 특정 요소에 바인딩할 수 있기 때문에, window와 ballElem의 차이를 알아야 합니다.
만약 여전히 작동하지 않는 부분이 있다면, 추가적인 코드 수정이나 오류 로그를 공유해주시면 더 자세히 도와드릴 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.