JS- 이벤트(event)

JS- 이벤트(event)

 

오늘은 JS를 사용해서 사용자와 상호작용을 할 수 있는

이벤트에 대해 간단하게 알아보도록 하겠습니다.

 

여기서 이벤트란 웹페이지에서

마우스를 클릭하거나, 키를 입력하는 등 사용자가

웹페이지를 동작할 경우 어떤 사건을 발생시키는 것을 의미합니다.

 

JS에서는 수없이 많은 이벤트가 존재하기 때문에

다양한 사건을 발생시키는 것이 가능합니다.

 

위에 예시처럼 사용자가 마우스를 클릭하거나,

키보드를 사용하여 키를 입력하는 방식도 있고

웹페이지의 이동이나 로딩, 스크롤바의 움직임 등등

다양한 방식의 이벤트가 존재합니다.

 

이벤트를 연결하는 방식에는

HTML 태그에 작성하는 인라인 방식,

HTML body 태그 이후에 작성하는 방식 등이 있으나

 

오늘은 HTML 태그에 작성하는 인라인 방식을 통해

설명을 드리도록 하겠습니다.

 

이제 본론으로 돌아가 이벤트를 사용하는 방식은

우선 가장 앞에 'on'을 써주는 것입니다.

 

예를 들면

마우스를 통해 원하는 해당 요소를 한번 클릭했을 때는

'onclick =...'으로 사용하고

키보드를 통해 입력란에 한 개라도 키를 입력했을 때

실행하는 방식은 'onkeydown =...'으로 사용합니다.

 

이밖에도 페이지 로딩 완료, 중단, 이동, 스크롤바 이동,

버튼 클릭, 포커스 이동, 요소의 값 변경 등등 다양한 이벤트가 있습니다.

 

하지만 오늘은 이벤트가 어떤 것인지, 어떤 식으로 사용하는지 정도만

정리하고 넘어가도록 하겠습니다.

 

오늘 마지막으로 버튼을 클릭했을 때 모달창을 띄울 수 있는

이벤트 코드 예시를 보여드리고 마치겠습니다.

 

<input type = "button" value = "입력" onclick = "alert("이런식으로 사용합니다")>
//버튼을 눌르면 "이런식으로 사용합니다"라는 모달창이 나오게 됩니다.

 

감사합니다!!