이벤트 핸들링

이벤트 & 이벤트 핸들링 & 이벤트 핸들러

• 이벤트 : 웹 페이지에서 발생하는 대부분의 사건들 ex) 버튼 클릭, 스크롤, 키보드 입력 ...
• 이벤트 핸들링 : JS를 통해 이벤트를 다루는 일
• 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다.

이벤트 핸들러를 등록하는 2가지 방법

const btn = document.querySelector('#myBtn');
btn.onclick = function() {
  console.log('Hello Jun!');
}

=> 클릭하면 'Hello Jun!' 출력

<button id="myBtn" onclick="console.log('Hello Codeit!')">클릭!</button>

이 방법은 별로 추천하지 않는다.
why?
=> onclick 이벤트에 문제가 생겼을 때 html도 일일히 찾아봐야 해서 유지보수가 힘들어질 수 있다..

그럼 어떤 방법을 써야할까??

자바스크립트 Deep Dive 저자이신 이웅모님의 특강을 오늘 들은 바로는
JS가 HTML에 의존하는 전통적인 형태는 바람직하지 않다고 한다.
변경될 가능성이 높은 곳에 의존하면 문제가 생기기 때문이다.
이게 무슨 소리냐 하면,

const emailInput = document.getElementById('email-input');
emailInput.addEvenetListener('focusOut', handleEmailInputFocusOut)

이런식으로 이벤트 핸들러를 만들어줬다고 해보자.
1열에서 emailInput 변수를 선언할 때 HTML의 id를 가져와 요소를 선택하는 모습을 볼 수 있다.
이 경우 HTML을 변경할 일이 생겨 저 id가 변경되거나 없어진다면 JS는 기능을 잃는다.
이러할 때 "JS는 HTML에 의존하고 있다." 라고 한다.

HTML은 자주 수정될 수 있기 때문에 HTML이 JS에 의존하는 모습이 바람직하다.
그래서 되도록 HTML의 역할을 JS로 밀어넣어주어야 한다(JSX 등을 사용해서).
CSS in JS도 이러한 이유때문에 사용한다.
그러면 결론적으로 HTML, CSS, JS를 모두 통합적으로 JS가 관장하고 이것이 CBD 컨셉이다!!