[javascript] event target , scroll event 질문

조회수 68회

안녕하세요.

제가 img 태그에 스크롤이 됬는지 확인하는 코드를 작성하였는데 img 태그는 scroll 이벤트를 감지하지 못하더라구요.

const imgs = document.querySelectorAll('img');
    imgs.forEach(img => img.addEventListener('scroll',isclicked));
    function isclicked(){
      console.log('image is clikced!');
    }

scroll 이벤트는 window화면만 감지할것같기는 한데 ... 다른 객체도 scroll 이벤트를 감지 할 수 있을까 궁금해졌습니다.

질문1 이벤트의 대상을 어떻게 알 수 있나요? 이벤트의 대상을 target 이라고 부르나요? html element 인가요?

일단 그래서 mdn을 찾아보았습니다. https://developer.mozilla.org/en-US/docs/Web/Events/scroll

Target : DefaultView, Document, Element

mdn을 찾아보았는데 제 생각에는 target 이 이벤트의 대상을 지칭하는것같더군요. element 가 target 이라면 img태그도 scroll의 대상이 될 수 있을것같은데...

질문 2 img 태그는 scroll 이벤트를 감지 하나요?

왜 위의 코드는 작동하지 않을까요?

질문읽어주셔서 감사합니다!

1 답변

  • 안녕하세요!

    wheel 을 이용하시면, img 태그도 이벤트 대상이 될수도 있습니다 .

    //HTML
    <img id="myItem" src="..." />
    
    //JS
    let myitem = document.getElementById("myItem"); 
    myitem.addEventListener("wheel", Handler);
    
    function Handler(e)
    {
        console.log('Hello')
    }
    

    수고하세요.

    • 수정: mousewheel이 deprecated되어서 그냥 wheel로 수정했습니다
    • 답변해주셔서 감사합니다. 근데 제가 궁금한건 mdn 에 scroll 이벤트의 타겟이 element 라고 되어있는데 왜 scroll이 img 태그에 스크롤을 감지하지 못하는지여서요 ㅎㅎ 이상하게 어떤 이벤트는 감지를 하고, 어떤 이벤트는 감지를 못하는게 있나봐요... mousewheel로는 감지를 한다고 하니 신기하네요 ㅎㅎ wo0kgod 2019.3.8 20:35
    • 와.. 질문을 제대로 이해하고 나니깐 저도 정말 궁금하네요.. Nate 2019.3.8 21:16
    •  앗 ... ㅎㅎ... 감사합니다.. 제가 궁금하게 만들어드렸군요!! wo0kgod 2019.3.8 22:42

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.