[자바스크립트] - 이벤트 객체 / 이벤트 객체의 프로퍼티와 매서드

 DOM의 이벤트 객체 

 

 DOM에는 이벤트 정보를 저장하는 event 객체가 있다. 

이 객체에는 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어있다. 

이벤트 객체는 이벤트 함수의 매개변수 자리에 event 또는 e라는 변수명으로 받아올 수 있다.

(이벤트객체는 매개변수 자리에 생긴다.)

* 다른 단어도 쓸 수 있지만 보통 알아보기 쉽게 event , e라는 것으로 쓰는 것 뿐이다.

 

   let imageTag = document.querySelector("img");

      imageTag.onclick = function (event) {

        alert(

          "이벤트 유형 : " +

            event.type +

            ", 이벤트 발생 위치 : " +

            event.pageX +

            ", " +

            event.pageY

        );

      };

 

이벤트 발생 위치는 내가 클릭한 좌표를 표시해준다. x,y좌표

 

---

 이벤트 객체의 프로퍼티와 매서드  

 

[ 프로퍼티 ]

- altkey	이벤트가 발생했을 때 Alt 키가 눌렸는지에 대한 여부를 boolean값으로 반환한다.
- button	마우스에서 누른 버튼의 키 값을 반환한다.
- charCode	keypress이벤트가 발생했을 때 어떤 키를 눌렀는지 유니코드값으로 반환한다.
- ☆ clientX	이벤트가 발생한 가로 위치 좌표를 반환한다.
- clientY	이벤트가 발생한 세로 위치 좌표를 반환한다.
- ctrlKey	이벤트가 발생했을 때 ctrl키가 눌렸는지에 대한 여부를 boolean값으로 반환한다.(true아님false값으로 반환)
- ☆ pageX	현재 문서를 기준으로 이벤트가 발생한 가로 위치 좌표를 반환한다. (해더에서 푸터까지의 길이에서 좌표를 반환)
- pageY	현재 문서를 기준으로 이벤트가 발생한 세로 위치 좌표를 반환한다.  (해더에서 푸터까지의 길이에서 좌표를 반환)
- ☆ screenX	현재 화면을 기준으로 이벤트가 발생한 가로 위치 좌표를 반환한다. (보고 있는 화면 기준)
- screenY	현재 화면을 기준으로 이벤트가 발생한 세로 위치 좌표를 반환한다. (보고 있는 화면 기준)

- shiftKey	이벤트가 발생했을 때 shift키가 눌렸는지에 대한 여부를  boolean값으로 반환한다.
- ☆ target	이벤트가 최초로 발생한 대상(태그)를 반환한다. 이벤트가 발생한 요소를 반환.
- timeStamp	이벤트가 발생한 시간을 반환한다. (기간한정 쿠폰같은 거 만들 때 사용. 쿠폰을 받는 순간부터 시간제약있는)
- type	발생한 이벤트의 이름을 반환한다.
- which	키보드에 관련된 이벤트가 발생할 때 키의 유니코드값을 반환한다.

 

 

[매서드]

- ☆ preventDefault( )

이벤트를 취소할 수 있는 경우 취소한다. a태그나 button처럼 기본 기능이 있을 때 기본 기능을 취소할 때 사용한다.