[javascript] 자바스크립트 이벤트 (feat. addEventListener)

퍼블리셔라면 알아야할 javascript 그중에서도 
동적인 홈페이지를 제작하기 위해 가장 많이 사용하는
addEventListner에 대해 알아보도록할게요.

*addEventListner 쓰기가 어렵고 불편하신분들은

제이쿼리를 이용하시는것도 방법입니다.

 

기본적으로 이벤트 리스너는 아래와 같이 사용합니다.

<script>
  var a = document.querySelector('.a');

a.addEventListner('이벤트값',function(){
alert('잘동작하니?');
});

//에로우펑션문법
a.addEventListner('이벤트값',() => {
alert('es6이상에서사용');
});
</script>

addEventListner 에는 주로 사용하는 이벤트값이 click이 있지만
알고보면 이외에도 많은 이벤트 값들이 있답니다.

그래서 해당 이벤트 값들은 어떤것들이 있는지?
이벤트리스너는 어떻게 사용하는지 알려드리고자 합니다.

UI이벤트 - 사용자가 브라우저에 들어왔을때 혹은 
           브라우저관련하여 어떠한 동작을 할때 발생하는 이벤트에요.
해당하는 이벤트값으로는 다음과 같아요.

load -웹페이지의 로드가 완료되었을때
unload - 웹페이지가 언로드될때 (새로운페이지를 요청할때)
error - 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는경우
resize - 브라우저 창크기를 줄였을때 / 주로 브라우저width값 확인시 사용합니다.
scroll - 사용자가 페이지를 위아래로 스크롤할때

키보드 이벤트 - 사용자가 키보드를 누르는값에 대한 이벤트입니다.

keyup - 사용자가 키를 땔때 
keydown - 사용자가 키를 눌렀을때
keypress - 사용자가 눌렀던 키의 문자가 입력될때 // input값에 주로 많이사용

포커스 이벤트- input상자에 포커스된 값을 읽을때 많이 사용합니다.
*버블링 : 예)타요소안의 input요소에  포커스 이벤트를 적용하고 싶을때
버블링이 발생하는 경우  input의 상위요소에도 이벤트를 트리거
버블링 발생하지않는경우 input에만 이벤트를 작동시킨다.

focus -요소가 포커스를 얻었을때 / 버블링 없음
focusin - focus와 동일한기능이지만 차이점은 버블링의 차이입니다./버블링발생
blur -요소가 포커스를 잃었을때 / 버블링 없음
focusout - 요소가 포커스를 잃었을때 /버블링 있음

 

마우스이벤트 - 사용자가 마우스나 터치화면을 사용할 때 발생 
가장 많이 사용하는 마우스 이벤트네요 ㅎㅎ

click - 사용자가 동일한 요소위에서 마우스버튼을 눌렀다 땔때
dbclick - 더블클릭
mousedown - 마우스를 누르고 있을때
mouseup - 눌렀던마우스를 땔때
mousemove - 마우스를 움직일때
mouseover -요소위로 마우스를 올릴때
mouseout - 요소바깥으로 마우스를 이동시킬때

폼이벤트 - 폼이벤트 주로 폼안의 데이터값들에 대한 이벤트 발생시 사용합니다.

input - <input>,<textarea>요소 값이 변경되었을 때
change - select 상자, 체크박스, 라디오 버튼의 상태가 변경되었을 때
submit - 사용자가 버튼키를 이용하여 폼을 제출할 때
reset -	리셋 버튼을 클릭할 때
cut - 폼 필드의 콘텐츠를 잘라내기 했을 때
copy - 폼 필드의 콘텐츠를 복사했을 때
paste - 폼 필드의 콘텐츠를 붙여넣을 때
select - 텍스트를 선택했을 때

솔직히 실무생활하며

퍼블리셔로서 주로 사용하는 이벤트들은 

click, focus,load,scroll... 기타 마우스 이벤트 들만

주로 사용했던것 같아요.

 

여러분들도 적시적소에 맞는 이벤트를 찾아서

사용해보도록합시다.