이벤트 객체

이벤트 객체

이벤트 객체는 사용자 입력(onclick,onkeyup,onscroll)등의 트리거에 의해 발생한 이벤트 정보가 담긴 객체입니다.

---

event handler

event handler를 사용해 element에 적용하는 방법은 두 가지가 있다.

직접 할당하기

function handleClick(event){
	console.log(event);
    console.log(event.target);
}
element.onclick = handleClick; 

addEventListener() 사용하기

• addEventListener() 메서드는 EventTarget의 주어진 이벤트 유형의, EventListener을 구현한 함수 또는 객체를 추가해 작동한다.

function handleClick(event){
	console.log(event);
    console.log(event.target);
}
element.addEventListener('onclick' , handleClick[, ..  ]); 

• target.addEventListener(type,listener);
  • type : 이벤트가 입력된다.(onclick,onkeyup..)
  • listener : 함수 혹은 함수를 가진 오브젝트를 인자로 받는다.

---

전달되는 이벤트 객체

• 위에 보이는 코드처럼 onclick 부분엔 onsubmit, onchange,onmouseover,onkeyup,event.preventDefault 등 다양한 이벤트 객체를 사용할 수 있다.
  
• 이벤트가 실행되고 handleClick 함수가 호출되면 호출된 함수엔 element와 event에 대한 정보가 전달이 된다.
• handleClick 함수에서 event객체를 사용할 수 있는데 가장 자주 사용하는 속성은 event.target 이다.

---

event.target

• event.target은 해당 이벤트를 발생시킨 element를 가리킨다. 말그대로 이벤트가 처음에 발생했던 대상를 나타낸다.
• console.log(event.target) --> <button>버튼<button> 같이 콘솔에서 출력이 된다.
  이를 이용해 부모,자식 요소에 접근하여 html문서를 조작할 수 있다.

Node.remove() , ParentNode.removeChild()

• Node.remove() : ()안 Node를 삭제한다.
• ParentNode.removeChild() : ParentNode 자식요소인 ()안 Node를 삭제한다.

event.preventDefault()

• 이벤트 실행 후 이벤트 리스너가 새로운 이벤트를 기다리기 위해 이벤트 실행 전으로 초기화 되는데 그런 경우를 방지하기 위해 사용한다.
• a 태그나 submit 태그 같은 경우엔 href를 통해 페이지가 이동하거나, 창이 새로고침되는 경우를 막아준다.
• 사용예

function (event){
  event.preventDefault();
}

---

추가 내용

한 페이지 안에서 JavaScript를 이용해 모든 화면 구현을 하는 것을 가리켜 Single Page Application(SPA) 라고 한다.