웹 페이지 이벤트 종류

DOM에서 이벤트가 발생하면 Javascript 이벤트 객체에서 이를 확인할 수 있다.

마우스 이벤트

• click : 요소에 마우스를 클릭했을 때
• dbclick : 요소에 마우스를 더블클릭했을 때
• mouseover : 요소 위로 마우스를 움직였을 때
• mouseout : 요소 바깥으로 마우스를 움직였을 때
• mousedown : 마우스를 누르고 있을 때
• mouseup : 눌렀던 마우스 버튼을 땔 때
• mousemove : 마우스를 움직였을 때
• contextmenu : 마우스 오른쪽 버튼 눌렀을 때 나오는 메뉴가 나오기 전에 이벤트 발생

키보드 이벤트

• keydown : 키를 처음 눌렀을 때
• keyup : 키를 떼었을 때
• keypress : 키를 누른 상태에서

UI 이벤트

• load : 웹 페이지의 로드가 완료되었을 때
• unload : 웹 페이지가 언로드될 때
• error : 브라우저가 자바스크립트 오류를 만났거나, 요청한 자원이 없는 경우
• resize : 브라우저 창 크기를 조정했을 때
• scroll : 사용자가 페이지를 위아래로 스크롤할 때
• abort : 이미지의 로딩이 중단되었을 때

폼이벤트

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

포커스 이벤트

• focus : 요소가 포커스를 얻었을 때 focusin
• blur : 포커스를 잃었을 때 focusout

드래그 앤 드롭 이벤트

• dragstart
• drag
• dragleave
• drop

eventListener

eventListener로 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는데, 이를 사용하면 이벤트가 발생할 때 특정 함수를 호출한다.

이벤트 리스너 등록

target.addEventListener(type, listener[, options]);
// type과 listener는 필수다, 나머지는 옵션이다. 
const a = document.querySelector('a');
a.addEventListener('click', sayHi);
function sayHi() {
  console.log("하이");

아래와 같은 방식으로 이벤트와 객체를 연결할 수 있지만, 동일한 객체에 동일한 이벤트를 여러번 적용할 수 없다는 단점이 있다.

//인라인 방식
<div onclick="alert('클릭')">클릭<div>

//고전 방식
//1
bt.onclick = function() {
  }
//2
 function view() {
  }
 bt.onclick =view();

이벤트 리스너 삭제

target.removeEventListener(type, listener[, options]);
// type과 listener는 필수다, 나머지는 옵션이다. 
a.removeEventListener('click', sayHi);

add/remove는 표준 이벤트 리스너 방법이다.
인터넷 익스플로러 이벤트 리스너 추가 삭제 방법은 아래와 같다.

a.attachEvent('onclick',function(){
  
});
a.detachEvent('onclick',function(){
  
});

아래 블로그를 참조하여 정리하였다.
https://jenny-daru.tistory.com/17
https://abc1211.tistory.com/201
https://ordinary-code.tistory.com/64