Java Script -8

이벤트 객체

1. 이벤트 처리기를 등록하는 방법
   -document 객체에 "on이벤트명" 속성에 이벤트 핸들러함수를 직접 대입

   이벤트 전파

2. 이벤트의 단계
   1) 캡쳐링 단계
   2) 타깃 단계
   3) 버블링 단계

• addEventListener("이벤트명", 이벤트 핸들러 함수, 캡쳐링 여부 - false(기본값))

  캡쳐링 여부 -
  false : 버블링 단계에서 이벤트 전파
  true : 캡쳐링 단계에서 이벤트 전파

• removeEvenListener: 메서드로 이벤트 삭제하기
  

• clearTimeout(이벤트 핸들러 등록 ID): 지연실행 취소

  -setInterval: 지연 반복 실행
  

• 지연 실행

setTimeout(function() {
	지연 실행할 코드
}, 지연시간 1/1000초) 

반환값 -> 이벤트 핸들러 등록 ID

clearInterval(이벤트 핸들러 등록 ID) = 지연반복실행 취소

이벤트 전파 취소하기

stopPropagation() : 이벤트 전파 취소

전파가 취소되어 타겟 이벤트만 발생함.

이벤트 전파의 일시 정지

stopImmediatePropagation()

기본 동작 취소하기

preventDefault()

window.addEventListener("DOMContentLoaded", function() {
    frmRegist.addEventListener("submit", function(e) {
        e.preventDefault();
    });
});

이벤트 리스너 안의 this

이벤트 리스너 안의 this는 이벤트가 발생한 요소 객체

.target // 실제 클릭한 요소
.currentTarget // 이벤트가 바인딩된 요소 === this

this가 원하는 객체를 가리키도록 설정하는 방법

• bind 메서드를 사용하는 방법
• 익명 함수 안에서 실행하는 방법
• 화살표 함수를 사용하는 방법
• addEventListener의 두 번째 인수로 객체를 넘기는 방법

마우스 객체의 공통 프로퍼티

마우스 이벤트 객체에서 좌표를 담당하는 프로퍼티

-mouserenter, mouseleave

-mouseover, mouseout

키보드 이벤트 객체

-keyup: 키를 눌렀다가 뗄때 발생
-keypress: 누르면 계속 이벤트가 발생
-keydown: 누르면 한번만 이벤트가 발생

-change: 키를 조작할때
:select, input[type='file'] = 파일을 선택, input[type='number|range']

Document 객체 동적 요소 생성, 변경

document.createElement("태그명");
document.createTextNode("텍스트명");

부모요소.appendChild("자식요소")  -> 가장 마지막 자식 요소로 추가
부모요소.removeChild("자식요소") -> 자식요소 제거 
부모요소.replaceChild("기존 요소", "새로운 요소");
부모요소.insertBefore("추가 요소", 기준 요소"); // 기준 요소 앞에 추가 요소가 추가