23.04.17 자바스크립트 이벤트 - 2

1. 이벤트 객체란?

 

   이벤트 객체 : 이벤트가 발생하게 되었을때 어떤 요소에서 어떤 이벤트가 발생했는지에 대한 정보가 포함된 객체

   객체 - 속성(프로퍼티), 기능(메서드= 함수) 을 가지고있다

 

 

2. 이벤트 객체 

 

   preventDefault() => 대표적인 이벤트 객체 내 메서드 (요소의 기본 속성값을 취소 및 무력화하는 메서드)

 

   이벤트 객체 내 프로퍼티 종류 : pageX, pageY(현재 문서기준으로 이벤트 발생한 가로.세로 위치) /

   target : 이벤트요소.target:이벤트가 발생한 대상 반환 / (e.target)

 

 

3. 마우스 이벤트 좌표값 출력

 

   마우스이벤트. pageX, pageY 활용 클릭한 지점의 좌표값을 출력하기

 

   const box = document.querySelector("#box"); 

   box.addEventListener("click", (e) => {

   alert(`이벤트 발생 위치 : ${e.pageX}, ${e.pageY}`);

   })

 

 

 

4. 키보드 이벤트

 

   키보드이벤트 e.code 입력한 키의 코드값 / e.key 입력한 키보드값 출력하기

 

   const body = document.body;

   const result = document.querySelector("#result");

   body.addEventListener("keydown", (e) => {

   result.innerText = `code: ${e.code}, key: ${e.key}`

   })