event

resize Event와 ResizeObserver 비교해보기 🙌

브라우저의 창 크기가 변화했을 때, 어떤 액션을 발생시키고 싶다면, 가장 먼저 떠올릴 코드는 다음과 같을 것이다.window.addEventListener('resize', () => { console.log('Window resized!');}); 바로 resize Event이다.위의 코드는 브라우저 창 사이즈 크기를 탐지한다.다만, 특정 DOM의 사이즈 변화는 탐지하지 않기에 개별 Element 사이즈 변화에 대응하지는 않는다. 때문에, 새로운 방법이 등장했는데 그것이 바로 ResizeObserver이다.ResizeObserver는 특정 Element의 크기 변화를 감지할 수 있다.따라서, 브라우저 창 크기 변화뿐만 아니라 특정 요소의 자체 크기가 변화할 때에도 어떠한 액션이 실행되도록 설정할 수 ..

input 붙여넣기 방지하기

때로는 보안과 같은 이유로 input에 붙여넣기가 허용되지 않을 수 있다. 이 경우, 붙여넣기 이벤트를 탐지하고 해당 이벤트가 제대로 작동하지 못하도록 해주어야 한다. 이번엔 이를 어떻게 구현할 수 있을지 알아보았다. 다음과 같이 input이 있다. 이 input에 붙여넣기를 허용하지 않기 위해서는 어떻게 해야할까? eventListner를 사용하면, 이를 간단하게 구현할 수 있다. const input = document.querySelector("input"); input.addEventListener('paste', (event) => { event.preventDefault(); alert("!") }); paste 이벤트가 발생하였을 때, 기존의 이벤트를 없애고 알림창을 띄운다. 만약 당신이 위..

브라우저 Scroll Event 사용하기

요즈음 웹 사이트들은 스크롤을 통한 이벤트 발생을 많이 일으키는 것 같다. 그리고 그 기본은 스크롤의 변화를 탐지하여 현재 사용자가 보고있는 페이지를 확인하는 것이다. 모바일 웹에서 흔히 사용되는 무한 스크롤 역시, 컴포넌트의 위치와 현재 사용자가 보고 있는 스크롤 위치를 파악하여 마지막에 도달하였을 때 자동으로 서버로 요청을 보내어 새로운 데이터를 가져오는 것 이다. 현재까지 사용자가 스크롤해온 값은 window.pageYOffset이나 window.scrollY로 확인할 수 있다. window.pageYOffset은 deprecated 되었다고 알려졌지만, IE 환경을 고려한다면 이를 사용해야 한다. window.scrollY는 window.pageYOffset와 같은 값을 가지므로, window.p..