Event 이해

• 브라우저에는 많은 이벤트들이 존재함
  • 마우스 스크롤, 키보드 입력, 브라우저 사이즈를 조정, 화면을 새로고침 등
• 브라우저는 어떤 이벤트 정보를 알려준다
• Load Event
  • HTML, CSS 렌더링을 마쳤을 때 발생하는 이벤트
• 마우스로 클릭했을 때
  • 브라우저가 개발자에게 뭘 클릭했는지 알려줌
• 브라우저에서 이벤트가 발생할 때, 그 때 어떤일을 하라고 일을 등록할 수 있음
• 즉, HTML 엘리먼트별로 어떤 이벤트가 발생했을 때, 특정행위를 하고싶다면
  • 대상 엘리먼트를 찾고 어떤일을 등록하면 됨
  • JavaScript 로 구현할 수 있음!

Event 등록

var el = document.getElementById("outside");
el.addEventListener("click", function() {
    // do something...
}, false);

• 이벤트 등록 표준방법을 나타낸다.

• addEventListener의 2번째 인자는 함수

  • 나중에 이벤트가 발생할 때, 실행되는 함수로 Event-Handler 또는 Event-Listener 라고 지칭함
  • Event Handler (Event Listener) 콜백함수는 이벤트가 발생할 때 실행됨

• 매개변수를 받을수도 있음 function(evt) { console.log(evt); }

  • KEY-VALUE 로 구성된 객체가 쭈루룩 출력됨

  /* target 정보를 이용해서 여러가지를 확인할 수 있음 */
  el.addEventListener("click", function(e) {
  	var target = e.target;
  	console.log(target.className, target.nodeName);
  	console.log(target.innerText);
  });
  

  크롬 디버깅 도구로 breakPoint 를 걸고, 해당 Console 에 target 으로 여러가지 정보를 활용할 수 있음

Event 객체

• EventListener 가 실행될 때
  • 어떤 이벤트에 의해서 실행됐는지
  • 이벤트 객체를 매개변수로 생성
• 따라서, EventListener 안에서는 이벤트 객체를 활용해서 추가적인 작업을 할 수 있음

var el = document.getElementById("outside");
el.addEventListener("click", function(evt){
 console.log(evt.target);
 console.log(evt.target.nodeName);
}, false);

• 가장 많이 사용되는 것은 event.target
  • 해당 이벤트가 발생한 element 를 가리킴
• element 도 객체
  • 내부의 className 또는 element가 가진 속성을 이용할 수 있음

Event 학습 더하기

• Event handler properties
• Event reference
• Event Objects