TIL: 23일차 "Event"

오늘은 자바스크립트를 사용하는 목적이라고 할 수 있는 EVENT에 대해 알아보고자 한다.

인터넷을 찾아보게 되면 이벤트에 대해 굉장히 자세하게 다룬 내용이 많지만, 우선 여기에선 내가 지금까지 다뤄본 내용을 정리하는 방식으로 포스팅 해보고자 한다.
따라서 이번 포스팅은 경험과 주관이 많기에 참고로만 사용하길 바란다.

EventListener

자바스크립트에서 이벤트를 사용 하고 싶을때 사용한 method는 eventListener였다.
사용 방법은 자바스크립트로 지정한 HTML요소에다 특정 액션을 취할때 호출 하는 eventListener를 지정하고, 어떤 행동과 그 행동으로 어떤 결과를 불러오게 할지를 작성했다.

코드로 나타내자면 다음과 같다.

const h1 = document.querySelector("h1");

function handleMouseEnter(){
  h1.innerText = "tomato";
}

h1.addEventListner("mouseenter",handleMouseEnter);

위와 같이 나타낼 수 있다.
HTML요소인 h1을 지정하고, h1에 마우스 포인터가 올려졌을 경우, handleMouseEnter함수를 호출하는 구조이다.
handleMouseEnter가 호출 되면, 자바스크립트가 해당 HTML요소의 텍스트를 tomato로 바꾸게 되어있다.

즉, 특정행동을 트리거로 삼아서 HTML 혹은 CSS에 영향을 줘서 변화를 만들어내는것이 event인것이다.

어떤 종류가 있는가?

보통 많이 사용하는 이벤트라고 하면 아무래도 mouseEvent가 많을것이다.
그 중에서 click 이벤트를 많이 사용하게 될텐데, click 이벤트를 사용함으로서 해당 요소를 클릭해서 정보를 얻을 수 있게 되는것이다.
단순히 다른 HTML로 넘어가는 링크가 아니라, 클릭했을때 다른 창을 불러온다던지, 경고창을 띄운다던지 하는 여러가지 행동을 넣을 수 있다.

위에도 사용 되었듯, 마우스 포인터에 따른 이벤트도 물론 존재한다. 마우스가 들어갔을때, 나왔을때, 눌려졌을때, 떼졌을때등 다양한 상황의 마우스를 이용한 이벤트가 존재한다.
이를 이용하면 그림판을 만드는것도 가능하다.

이벤트의 종류들을 그림으로 나타내면 다음과 같다.

그림에 나타나 있는 이벤트 말고도, 오른쪽 클릭을 했을때 발생하는 이벤트등 다른 이벤트도 많이 있다.

종류가 많기는 하지만, 물론 처음부터 외울 필요는 없다.
직접 써보면서 고민해야 머리에 많이 남는다고 생각하기에, 머리에 떠오른 아이디어를 직접 구현해보는 습관을 들이도록 하자.
자신이 생각한것보다 아주 많은것이 가능하다고 느껴질 것이다.