[javascript] event 객체의 매개변수와 property

때때로 이벤트 핸들러 함수 내부에서 event, evt, 혹은 e와 같은 이름으로 명명된 매개변수(parameter)를 봤을 것입니다. 이벤트 핸들러에 전달되는 매개변수는 event 객체 하나뿐이며 event객체에는 이벤트와 관련된 프로퍼티 및 메서드가 있다.

 

1)event Property

(1)event.target && event.currentTarget

①Event.target: 실제로 이벤트를 발생시킨 요소

②Event.currentTarget: 이벤트에 binding된 DOM 요소(addEventListener 메소드 앞에 기술된 객체를 말함)

 

아래 버튼 2개를 자식요소로 가지고 있는 parent 요소가 있다고 해보자.

만약 첫번째 버튼을 클릭하게 되면 결과는 아래와 같이 나온다.

// HTML
<div class="parent">
  <button id="btn1">button 1</button>
  <button id="btn2">button 2</button>
</div>

// Javascript
function getEventTarget(e) {
  console.log(e.target); // <button id="btn1">button 1</button>
  console.log(e.currentTarget); // <div class="parent">...<div>
  console.log(this); // <div class="parent">...<div>
  console.log(e.currentTarget === this); // true
}

let parent = document.querySelector('.parent');
parent.addEventListener('click', getEventTarget);

 

 

①e.target은 실제로 이벤트를 발생시킨 요소로 첫번째 버튼을 클릭한 경우 첫번째 버튼 요소를, 두번째 버튼을 클릭한 경우 두번째 버튼 요소가 console에 출력된다.

 

②e.currentTarget은 이벤트에 binding된 DOM 요소로서 addEventListener 메소드 앞에 기술된 객체를 의미하므로 Parent 요소가 출력된다

 

③addEventListener 함수에서 지정한 event Handler 내부의 this는 addEventListener 메소드의 객체를  의미하므로 parent 요소가 출력된다.즉 이벤트 객체의 currentTarget 프로퍼티와 동일함.

 

Event Object(이벤트 객체)

 

(2)event.type과 event.keyCode

①Event.type: 발생한 이벤트의 종류

②Event.keyCode: 발생한 이벤트의 키보드 번호

 

// HTML
<div class="parent">
  <input type="text" class="val">
  <button id="btn">button</button>
</div>

// Javascript
function getEventType(e) {
  console.log(e.type); // keyup
  console.log(e.keyCode); // 13
}

let inputBox = document.querySelector('.val');
inputBox.addEventListener('keyup', getEventType);

어떤 알파벳 하나를 입력하고 키보드에서 ‘enter’를 입력하게 되면 e.type은 ‘keyup’이 되고, e.keyCode는 13이 된다.

즉 발생한 이벤트의 타입은 ‘keyup’이고 발생한 이벤트의 키보드 번호(enter의 키보드 번호)는 13이다.