.onsubmit과 .addEventListener의 차이

다음 두 예제 코드를 봅시다.

예시 1 : .onsubmit

<form id="foo">
  <input name="bar" />
  <button type="submit">제출</button>
</form>

const form = document.getElementById('foo');
form.onsubmit = function (event) {
  event.preventDefault();
    console.log(event.target.bar.value);
};

예시 2 : .addEventListener

<form id="foo">
  <input name="bar" />
  <button type="submit">제출</button>
</form>

const form = document.getElementById('foo');
form.addEventListener("submit", function (event) {
  event.preventDefault();
  console.log(event.target.bar.value);
});

이 코드들의 실행 결과를 예상해보면, form 태그 내의 input의 value값을 읽어들여 출력할 것이라는 사실을 알 수 있습니다.

실제로 두 코드 모두 같은 결과를 보입니다.

그렇다면 js는 왜 .onsubmit과 .addEventListener로 나누어 놨을까요?

이 둘의 차이는 무엇일까요?

.onsubmit과 .addEventListener('submit', () => { /* ... */ })의 차이는 다음과 같은 상황에서 발생합니다.

차이점

앞서 보여드린 예제처럼 위 기능 둘 다 자바스크립트의 form 이벤트 발생을 핸들링할 때 사용됩니다.

하지만 이 기능들은 다중 이벤트 핸들링 상황에서 큰 차이를 보이는데요,

.onsubmit은 form엘리먼트를 나타내는 DOM 객체의 프로퍼티입니다. 따라서 해당 객체의 단일 이벤트 핸들러로 submit을 할 수 있게 도와줍니다.

예를 들면 .onsubmit 예제를 봅시다.

<form id="foo">
  <input name="bar" />
  <button type="submit">제출</button>
</form>

const form = document.getElementById('foo');
form.onsubmit = function (event) {
  event.preventDefault();
  alert('1');
  console.log(event.target.bar.value);
};
form.onsubmit = function (event) {
  event.preventDefault();
  alert('2');
  console.log(event.target.bar.value);
};

.onsubmit은 앞서 언급했듯, .onsubmit은 DOM 객체의 프로퍼티이자, 단일 이벤트 핸들러이므로 첫 번째 핸들러가 등록된 이후, 곧이어 두 번째 핸들러가 덮어 쓰게 됩니다.

즉, alert(’2’);이 있는 핸들러만 동작하게 된다는 것 입니다.

반면에 .addEventListener는 form엘리먼트를 나타내는 DOM 객체의 메서드 입니다. 따라서 하나 이상의 이벤트 리스너를 함수로서 submit 이벤트로 form에 등록할 수 있습니다.

프로퍼티와 달리 메서드는 체이닝이 가능하다.

다음 예제인 .addEventListener를 봅시다

<form id="foo">
  <input name="bar" />
  <button type="submit">제출</button>
</form>

const form = document.getElementById('foo');
form.addEventListener("submit", function (event) {
  event.preventDefault();
  alert('1');
  console.log(event.target.bar.value);
});
form.addEventListener("submit", function (event) {
  event.preventDefault();
  alert('2');
  console.log(event.target.bar.value);
});

.addEventListener는 메서드이므로, form에 붙일 수가 있습니다. 따라서 사용자가 해당 form 태그를 통해 제출했을 때, .addEventListener로 등록한 모든 함수들이 동작하게 됩니다.

따라서 위 코드의 실행 결과는 등록한 모든 이벤트를 실행하게 되므로, alert('1');과 alert('2'); 를 모두 실행하게 됩니다.

이벤트를 다중으로 등록할 수 있으므로 캡처와 버블링을 사용할 수 있다는 특징도 있습니다.