[FakeFlix] HTML의 Dom events에 관해서(좌우 scroll과 상하 wheel event가 충돌할때 나의 해결법)

dom events를 항상 아무 생각없이 써왔다. 그런데 최근에 dom 을 직접 조작하는 일을 하다가, 다시 React를 공부하는데, 

 

'워~~~'

 

하는 생각이 들었다. 어렵다... 정말 요즘 태어나서 요즘 개발자해서 너무 다행이다. 예전에 하셨던 분들 다들 훈장 받으셔야한다...

 

여튼 또 일하느라 급급하게 createElement로 dom 조작을 하고, event도 붙이고 하다가 React 컴포넌트에 onScroll 이벤트를 붙이려니까 순간 게슈탈트 붕괴가 왔다. 여튼 이 기회에 dom event에 대해서 문서를 찾아봤다. 

 

www.w3schools.com/jsref/dom_obj_event.asp

HTML DOM Event Object

위의 문서는 HTML DOM events에 대해서 정의해두었다. JavaScript로 각각의 elements에 어떤 event handler를 붙일수 있는지를 볼수 있다. Event는 주로 함수와 조합해서 쓰는데, 이 함수들은 특정 이벤트가 발생할때까진 실행되지 않는다. 대표적으로는 버튼 클릭 이벤트가 있다. 

 

 

wheel 이벤트

스크롤 이벤트를 붙이려고 봤더니 어쩐지 안먹혀서 wheel event를 사용해야했다.(이유는 좀더 공부를 해야할 것 같은데, 아직은 파악이 어려웠다. 대강 파악하기론 명시적으로 overflow-y: scroll; 처럼 표시가 되어야만 할 수 있는것 같았다. ) 

 

www.w3schools.com/jsref/event_onwheel.asp 

IE에서는 dom에 onwheel 이벤트가 없다는데 IE는 이제 빠이빠이요.. 

wheel 이벤트 동작할때

<MainWrapper
  bg={"https://picsum.photos/seed/picsum/1000/400/?blur"}
  onWheel={(e) => {
  if (e.target !== e.currentTarget) {
  return false;
  }
  console.log("wheel event가 발생하고 있습니다 나으리");
  }}
>
// 어쩌구
</MainWrapper>

scroll 이벤트

내가 만드는 사이트에서 좌우로 이동하는 스크롤이 있는데 거기에서 scroll 이벤트 관련 처리를 하기 위해 onScroll을 사용하려고 한다. 

www.w3schools.com/jsref/event_onscroll.asp

재밌구먼

 

scroll 이벤트 발생할때 

 

<ListWrapper
  onScroll={(e) => {
  // e.stopPropagation();
  console.log("scroll 이벤트가 발생하고 있습나다요~~");
  }}
 >
   {Array(length)
     .fill("img")
     .map((i, index) => {
     return <Thumbnail key={index} />;
   })}
</ListWrapper>

 

 

 

Wheel event와 Scroll Event가 충돌나서 읽어본 event 관련 글(버블링과 캡쳐)

 

ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

 

좋은 글을 읽게 되었다. 

 

내가 해결해야 했던 문제는 좌우로 스크롤 할때는 wheel 이벤트에서 뭘처리를 안하게 해야했다. 그런데 스크롤만해도 wheel 동작도 하기때문에 충돌이 났다.(스크롤하는 중에 target객체 위에서 wheel event가 동작했다)

 

1. 처음 생각한 방법은 scroll 이벤트가 발생하는 객체에서 stopPropagation을 해서 event가 상단으로 안퍼지게 하는것이었는데, 마우스를 이동하면 가끔씩 상하로도 이동하게 되가지구, 완전히 막히질 않았다. 

 

2. 그래서 위의 글을 읽고, 실제 타겟과 내가 이벤트를 붙인게 같은지를 비교했다. 

 

onWheel={(e) => {
  if (e.target !== e.currentTarget) {
  return false;
  }
  console.log("wheel event가 발생하고 있습니다 나으리");
}}

 

이렇게 지금 이벤트가 일어나고 있는 객체(target)와, 너가 지금 어디에 달린 이벤트인지(currentTarget)를 확인해서 다르면 return false를 통해 아무것도 안하게 했다. 

 

사실 객체 위에서 wheel 상하 휠 동작도 하기는 해야해서, 추가적으로 계속 보정을 해야할 방법이긴하다. 일단 해당 방식으로 main위에서 scroll 해야만 wheel event에서 처리할 로직이 동작하도록 했다. (이미지 하나하나 위에서 wheel 동작이 일어나면 안하게 한것, 완전한 해결법이 아니다)

 

더 좋은 방법이 있을 것 같은데, 지금은 이렇게 문제를 해결해보고 추후에 더 좋은 방법이 있으면 개선해보려고 한다. 

 

 

후기

event는 항상 다뤘으면서도 제대로 알고 있었던 건 아닌것 같다. 버블링이나 캡처링 관련 부분도 계속 더 제대로 이해해봐야겠다.