[이벤트] 2. 이벤트 객체

2. 이벤트 객체

 

이벤트 객체란?

- 이벤트가 발생하면 브라우저는 발생한 이벤트에 관련된 다양한 정보를 다은 이벤트 객체를 만들어 이벤트 리스너에 전달한다

- 예) mousedown 이벤트의 경우 마우스 좌표, 버튼 번호 / keydown 이벤트의 경우 키 코드 값, <shift>키가 눌려졌는지 등

- 이벤트 리스너는 이벤트 객체의 프로퍼티 값을 통해 발생한 이벤트에 관한 자세한 사항을 알 수 있다.

 

이벤트 객체 전달받기

- 이벤트 리스너가 이벤트 객체를 전달받는 방법 3가지

1) 이름을 가진 이벤트 리스너 함수의 경우

- 이벤트 리스너 함수는 다음과 같이 첫 번째 매개변수를 통해 이벤트 객체를 전달받을 수 있다.

매개변수 이름은 e 대신 마음대로 붙여도 된다. (생략도 가능)

function f(e){ //매개변수 e에 이벤트 객체를 전달받음. e는 생략 가능
...
}
obj.onclick = f; //obj 객체의 onclick 리스너로 함수 f 등록

2) 익명 함수의 경우

- 익명 함수의 경우에도 다음과 같이 첫 번째 매개변수(e)를 통해 이벤트 객체를 전달받는다.

obj.onclick = function(e){ //매개변수 e에 이벤트 객체를 전달받음. e는 생략 가능
	...
}

3) HTML 태그의 리스너 경우

- HTML 태그에 리스너를 만드는 경우 이벤트 객체는 event 라는 이름으로 전달된다.

function f(e){
...
}
...
<button onclick="f(event)">버튼</button>
<div onclick="alert(event.type)">버튼</div>

 

이벤트에 들어있는 정보

- 이벤트 객체에는 발생한 이벤트에 관한 정보를 담고 있는 프로퍼티들과 이벤트의 흐름등을 제어하는 여러 메소드가 들어있다.

 

1) 이벤트 타겟과 target 프로퍼티

- target 프로퍼티: 이벤트 타겟 객체를 가리킴, 이벤트를 유발시킨 객체(태그)

- 예) 브라우저에서 <button> 태그를 클릭하였다면 click 이벤트의 타겟은 button 객체가 된다

- 표 : 이벤트 객체들의 공통 멤버

멤버	종류	설명
type	프로퍼티	현재 발생한 이벤트의 종류를 나타내는 문자열(click,load 등)
target	프로퍼티	이벤트를 발생시킨 객체(DOM 객체 혹은 HTML 태그)
currentTarget	프로퍼티	현재 이벤트 리스너를 실행하고 있는 DOM 객체
defaultPrevented	프로퍼티	이벤트의 디폴트 행동이 취소되었는지를 나타내는 true/false 값
preventDefault()	메소드	이벤트의 디폴트 행동을 취소시키는 메소드

 

이벤트의 디폴트 행동 취소, preventDefault()

- HTML 태그 중 몇몇은 특정 이벤트에 대해 디폴트 행동을 한다. (<a>태그를 클릭하면 웹 페이지를 로드하는 것, submit 버튼을 클릭하면 폼 데이터를 웹 서버로 전송하는 것 등)

- 자바스크립트로 이러한 디폴트 행동이 일어나지 않게 할 수 있는 2가지 방법

1) 이벤트 리스너에서 false를 리턴하면 디폴트 행동을 취소시킬 수 있음

<a href="http://www.naver.com" onclick="return false">이동 안되는 링크</a>

2) 이벤트 객체의 preventDefault()를 호출

<a href="http://www.naver.com" onclick="event.preventDefault()">이동 안되는 링크</a>

- 모든 이벤트의 디폴트 행동을 금지시킬 수 있는 것은 아님: 이벤트 객체의 cancelable 프로퍼티가 true인 경우에만 취소 가능

 

예제

<h3>이벤트의 디폴트 행동 취소</h3>
    <hr>
    <a href="http://www.naver.com" onclick="return query()">네이버로 이동할 지 물어보는 링크</a>
    <hr>
    <form action="">
        <input type="checkbox">빵(체크 가능)<br>
        <input type="checkbox" onclick="noAction(event)">술 (체크 불가능)
    </form>

<script>
        function query(){
            const ret = confirm("네이버로 이동하시겠습니까?");
            return ret;
        }
        function noAction(e){
            e.preventDefault();
        }
</script>

 

<a>태그에서 onclick에서 return query()인 이유는, query 함수에서 confirm으로 값을 받고 있는데, confirm은 확인/취소가 가능하도록 창이 뜨는거라서 확인을 누르면 true, 취소를 누르면 false를 반환하는 기본 함수이다. 그래서 네이버로 이동하시겠습니까? 에서 사용자가 취소를 누르면 false가 반환되고, 그렇게 되면 a 태그의 이벤트의 디폴트 행동이 금지되는 것이다.