이벤트

HTML이벤트는 브라우저가 수행하는 작업이거나 사용자가 수행하는 작업일 수 있습니다.
이벤트의 예 :

• 버튼(요소)을 클릭했습니다.
• 웹 페이지 로드가 완료 되었습니다.
• input 필드가 변경되었습니다.

• 이벤트 등록/제거

  자바스크립트를 사용하면 이벤트가 감지될 때 코드를 실행할 수 있습니다.
  이벤트를 핸들러를 적용하는 방법에는 3가지가 있습니다.
  다음은 click 이벤트의 예입니다.

  인라인방식	등록	<button onclick='JavaScript Code'>	HTML 태그의 속성으로 등록합니다. JavaScript Code는 실행가능한 코드이어야 합니다.
  		element.setAttribute('onclick', 'JavaScript Code')	속성을 설정하여 이벤트 등록.
  	제거	element.removeAttribute('onclick')	속성을 제거하여 이벤트 처리기를 제거합니다.
  객체 속성	등록	element.onclick = function;	객체의 이벤트 속성값에 등록합니다. 기존에 이벤트 처리기가 있다면 덮어씁니다. (한가지 유형에 하나의 이벤트 처리만 가능) 함수의 첫번째 인자로 event 객체가 전달됩니다
  	제거	element.onclick = null;	이벤트 처리기를 제거하려면 null값을 대입합니다.
  이벤트 리스너	등록	element.addEventListener(event, function, useCapture);	event는 on을 제거하고 기입해야 합니다.(onclick 아니고 click) 하나의 요소에 같은 유형의 여러 이벤트 처리기를 추가할 수 있습니다. useCapture는 이벤트가 발생할때 요소의 순서를 정의할 수 있습니다. false : 기본값 이벤트 버블링 입니다. true : 이벤트 캡처링 입니다. 함수의 첫번째 인자로 event 객체가 전달됩니다
  	제거	element.removeEventListener(event, function, useCapture);	function이 명식적으로 선언되어 있어야 이벤트 처리기를 제거할 수 있습니다. 익명함수를 사용하여 등록한 경우는 제거할 수 없습니다.

  element.click() 메서드로 요소의 클릭이벤트를 시뮬레이션할 수 있습니다.

• 캡쳐링과 버블링

  이벤트가 발생할 때 요소의 순서를 정의 합니다.
  버블링은 이벤트가 자식요소부터 발생해서 부모요소로 올라가면서 전파 되는 방식이고,
  캡쳐링은 이벤트가 최상위요소부터 시작해서 자손 요소로 내려가면서 전파 되는 방식입니다.

  

Event 객체

• 상수

  상수	설명	DOM
  CAPTURING_PHASE	현재 이벤트는 캡쳐 단계 입니다. (1)	1
  AT_TARGET	현재 이벤트가 목표 단계 입니다. (2)	2
  BUBBLING_PHASE	현재 이벤트는 버블링 단계 입니다. (3)	3

• 속성

  속성	설명	DOM
  bubbles	특정 이벤트가 버블링 이벤트인지 여부를 반환	2
  cancelable	이벤트가 기본 액션을 막을 수 있는지 여부를 반환	2
  currentTarget	이벤트 리스너가 이벤트를 트리거 한 요소를 반환	2
  defaultPrevented	preventDefault() 메서드가 이벤트에 대해 호출되었는지 여부를 반환	3
  eventPhase	현재 평가되고 있는 이벤트 흐름단계를 반환	2
  isTrusted	이벤트가 사용자가 호출한 경우인지 여부를 반환	3
  target	이벤트를 트리거한 요소를 반환	2
  timeStamp	이벤트가 생성 된 시간을 반환(밀리초)	2
  type	이벤트의 이름을 반환	2
  view	이벤트가 발생한 window 객체의 참조를 반환	2

• 메서드

  메서드	설명	DOM
  preventDefault()	취소 가능한 이벤트를 취소합니다.(기본 액션이 발생하지 않습니다.)	2
  stopPropagation()	이벤트 흐름(버블링 또는 캡쳐링)이 더이상 발생하지 않도록 합니다.	2
  stopImmediatePropagation()	동일한 이벤트의 다른 리스너가 호출되지 않도록 합니다.	3