[JavaScript] event 객체

 

JavaScript에서 이벤트 객체(event object)는

DOM 요소에서 발생한 이벤트에 대한 정보를 포함하는 객체이다.

 

 

이벤트가 발생하면 브라우저는 이벤트 객체를 생성하고,

이벤트가 발생한 요소와 관련된 정보를 이벤트 객체에 담아서 이벤트 핸들러 함수로 전달한다.

 

이벤트 객체에는 다양한 속성과 메서드가 포함되어 있어서 이벤트에 대한 정보를 확인하고 처리할 수 있다.

일반적으로 이벤트 핸들러 함수의 매개변수로 이벤트 객체를 받아서 사용한다.

 

---

ex1. form [ onsubmit ]

<form onsubmit="getPrompt(event)">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

function getPrompt(event) {
  event.preventDefault(); // 폼 제출 취소

  // 폼 내부의 요소들에 접근하여 값을 가져옴
  const username = event.target.username.value;
  const password = event.target.password.value;

  // 폼 데이터 처리 및 서버에 전송 등의 작업 수행
}

'onsubmit' 이벤트는 <form>요소에서 폼을 제출할 때 발생하는 이벤트이다.

이때 이벤트 핸들러 함수는 하나의 파라미터를 받게 되는데,

이 파라미터는 제출 이벤트에 대한 정보를 담고 있는 이벤트 객체이다.

 

이 객체에는 preventDefault() 메서드가 포함되어 있어서 폼 제출을 취소할 수 있다.

또한 이벤트 객체의 'target' 프로퍼티를 통해 이벤트가 발생한 요소를 가져올 수 있다.

 

 

ex2. checkbox [ onchange ]

<input type="checkbox" name="deleteCheckBox" onchange="onChangeValue(this);" />

function onChangeValue(checkbox){
  const name = $(checkbox).attr('name');        
  $('input[name="'+name+'"]').prop('checked', checkbox.checked);
}

체크 박스는 체크된 상태로 제출되는 경우 해당 값이 서버로 전송되며

체크되지 않은 상태로 제출되는 경우 해당 값이 전송되지 않는다.

 

'checkbox' 요소에서 'onchange' 이벤트는 체크 박스의 상태가 변경될 때 발생한다.

 

이 때 'this'는 체크 박스 자체를 가리키는 것이다.

즉, HTML 요소를 JavaScript로 선택하는 것이다.

'this'는 현재 이벤트가 발생한 요소를 가리키는데, 체크박스의 경우 해당 체크박스 자체가 'this'가 된다.

 

앞선 이벤트 객체에서는 event.target을 통해 체크박스를 가리킬 수 있다.

 

 

간단히 말하자면, 체크박스를 선택하려면 'this'를 사용하고,

체크박스의 이벤트를 처리할 때는 이벤트 객체를 사용하여 'event.target'을 통해 체크박스를 가리킬 수 있다.