이벤트는...
모든 Element는 Node를 상속하고, Node는 EventTarget을 상속한다. 즉 모든 Element는 EventTarget이다! 그래서 모든 Element에는 Event Handler를 등록할 수 있다.
preventDefault()
체크박스의 값이 true,false에 따라 브라우저에서는 체크박스가 표시되거나 되지 않는다. 이와 같은 것은 브라우저에서 기본적으로 해당 값일 때, 표현을 해주는 것들이 설정되어 있기 때문이다. 스크롤을 하면 화면이 내려가는 것도 다 설정이 되어있는 것인데, 이를 막고 다른 액션을 취하고 싶다면 event.preventDefault()를 사용할 수 있다. (근데 굳이 그럴 일이 많진 않을것이라고 엘리가 말해주었다)
스크롤과 같은 특정 이벤트는 preventDefault만으로 막히지 않을 수 있다. 이는 passive가 true로 설정되어 있기 때문인데, 옵션에서 passive를 false로 설정해주면 스크롤도 preventDefault로 막을 수 있다!
이벤트 캡처링
이벤트가 상위에서 하위로 전파되는 과정이다.의도적으로 캡처링을 사용할 일은 많이 없다고 한다. 개념을 알아두자.
이벤트 버블링
자식에서 이벤트가 발생하면 부모 요소에 설정된 이벤트 핸들러도 작동하게 되는 원리이다. "거의" 모든 이벤트는 버블링된다.(예외:focus) stopPropagation으로 의도적으로 버블링을 막을 수 있다.
stopPropagation
stopPropagation으로 이벤트가 위로 버블링되는 것을 막을 수 있다. 하지만 이는 프로젝트가 커지거나, 다른 사람과 협업을 할 때, 예기치 못한 에러로 연결될 확률이 높아서, 지양하는 것이 좋다. 그렇게 설계를 해야할 때는, if문으로 내가 관심이 있는 상황을 지정해서 처리를 해주는게 좋다.
이벤트 위임
부모요소는 자식 요소에서 발생하는 모든 이벤트를 들을 수 있다.
부모 안에 있는 자식들에게 공통적으로 무언가 처리해야 할 때, 일일이 eventListener를 붙이는게 아니라 부모에 등록하는 것이 좋다.
이벤트 위임으로 쇼핑리스트 앱 개선!
원래 쇼핑리스트 앱에서는 추가되는 각 item요소를 만들때마다 직접 addeventListener로 클릭으로 삭제할 수 있는 이벤트를 붙여주었다. 하지만 item이 100개 1000개 10000개가 된다면 직접 하나하나 붙이는 것보다 부모 요소에 이벤트를 부여하고 위임하는게 훨씬 효율적일 것이다. 이벤트 위임을 활용해서 리팩토링해보았다.
rootList.addEventListener('click', (e) => {
if (e.target.tagName === 'I') {
e.target.parentNode.remove();
}
});rootlist라는 부모 요소에 eventListener를 한번만 달아주면 이벤트 위임으로 하위에 있는 모든 요소들에 원하는 event를 달아줄 수 있다.
