addEventListener()로 고급진 이벤트 추가하기

근데 생각해보니까 이거 전에 픽하는게 먼저 와야 하지 않나... 뭐 아무튼.

뭔가 기깔나는 것을 구현하기 위해 이 블로그 혹은 다른 블로그를 보다 보면 그런 게 있다. 어? HTML에서 온클릭도 안 줬는데 작동하네? 어? 이거 더블클릭 하니까 작동하네? 어? 스크롤 내리니까 작동하네?

를 알아보자.

---

굳이 버튼에 온클릭을 안 줘도 작동하는 비결이 바로 addEventListener()이다. getElementByID나 querySelector같은 걸로 DOM(쉽게 말하자면 문서의 어떤 요소)을 가져와서 addEventListener()로 이벤트를 추가할 수 있다. 이 추가라는 게 단순히 알림이나 콘솔 이런걸 떠나서 뭐 모달 소환 곱하기 이런 함수까지 된다. 

 

See the Pen Eventlistner by koreanraichu (@koreanraichu) on CodePen.

참 쉽죠? 저 코드는 간단하다. h1을 가져온다->h1을 클릭하면 알림이 뜨게 만든다. 끝. 오케이? 그럼 클릭만 되나요? ㄴㄴ 그건 아니다.

 

See the Pen Untitled by koreanraichu (@koreanraichu) on CodePen.

더블클릭도 된다. 그럼 클릭이나 더블클릭 말고 키를 눌러서 입력하는 건 어떻게 할까? addEventListener()에 keydown을 주면 된다. 예전에는 키프레스를 썼었는데 요즘은 키다운/키업이라고... (키다운: 눌렀을 때/키업: 뗐을 때)

 

See the Pen Untitled by koreanraichu (@koreanraichu) on CodePen.

clear버튼에도 addEventListener를 통해 입력된 것을 전부 지우는 기능을 추가했다. 아무 키나 눌렀을 때 표시되는 것은 e.key와 e.code, 그리고 e.keyCode인데

 

e.key a & e.code KeyA & e.Keycode 65

 

이렇게 뜬다. 솔직히 무슨 차이인지는 모르겠다.

 

그럼... 스크롤도 되나요...? 네, 됩니다. 그런데 그건 설명할 게 많아서 이 글에서는 다루지 않을 예정이다. 나중에 스크롤 이벤트 하면서 다뤄보겠듬...