onclick 이벤트에서 여러 JavaScript 함수를 호출하는 방법

사용자가 요소를 클릭할 때 여러 작업을 실행하려면 인라인 onclick 핸들러에 여러 함수 호출 문을 넣거나, addEventListener로 별도의 콜백을 등록하거나, 이후 호출이 조건에 따라 달라져야 할 때 &&와 ||를 사용합니다. 유지 관리하기 쉬운 페이지 코드에는 addEventListener를 선택합니다. 인라인 핸들러는 작은 예제에서 간결하고, 논리 연산자는 조건부 호출을 위한 것입니다.

인라인 onclick 핸들러에서 여러 함수 호출

인라인 핸들러에는 세미콜론으로 구분된 여러 JavaScript 문을 포함할 수 있습니다. 호출은 순서대로 실행됩니다. 이는 각 함수를 호출하는 것이며, 함수 값을 속성에 전달하는 것이 아닙니다.

이 예제를 실행하세요:

function saveDraft() {
  console.log("Draft saved");
}

function showConfirmation() {
  console.log("Confirmation shown");
}

function handleClick() {
  saveDraft();
  showConfirmation();
}

handleClick();

이 독립 예제는 문의 순서를 보여줍니다. 페이지에서는 같은 호출을 버튼의 인라인 핸들러에 배치할 수 있습니다:

<button type="button" onclick="saveDraft(); showConfirmation();">Save</button>

요소는 페이지에 있어야 하며, 이름이 지정된 두 함수 모두 클릭이 발생할 때 사용할 수 있어야 합니다. 호출이 잡히지 않은 예외를 던지면 그 같은 핸들러의 이후 문은 실행되지 않습니다. 다음 작업이 여전히 일어나야 한다면 함수 내부에서 오류를 처리하세요.

addEventListener로 여러 클릭 핸들러 등록

페이지 코드에서는 각 콜백을 별도로 등록합니다. 브라우저는 등록 순서대로 클릭에 대한 리스너를 호출합니다. 리스너가 예외를 던지면 이벤트 디스패치는 그 오류를 보고하지만, 등록된 다른 리스너는 여전히 디스패치됩니다. 별도의 리스너는 한 콜백의 비동기 작업이 다른 콜백이 시작되기 전에 완료된다는 약속이 아닙니다.

<button id="save" type="button">Save</button>
<script>
  const button = document.getElementById("save");

  function saveDraft() {
    console.log("Draft saved");
  }

  function showConfirmation() {
    console.log("Confirmation shown");
  }

  button.addEventListener("click", saveDraft);
  button.addEventListener("click", showConfirmation);

  // To remove a listener later, use the same callback reference:
  button.removeEventListener("click", showConfirmation);
</script>

removeEventListener에는 등록에 사용한 것과 같은 이벤트 유형, 같은 콜백 함수 객체, 같은 캡처 설정이 필요합니다. 익명 함수를 등록하고 그 참조를 유지하지 않으면, 나중에 그 같은 함수 객체를 전달하여 제거할 수 없습니다. HTML은 버튼을 표시된 상태로 유지하고 JavaScript는 페이지 스크립트 안에 있습니다. 이 브라우저 예제는 콘솔 출력 예제가 아닙니다.

조건부 호출에 &&와 || 사용

논리 연산자는 단락 평가를 합니다. &&는 왼쪽이 참일 때만 오른쪽을 평가하고, ||는 왼쪽이 거짓일 때만 오른쪽을 평가합니다. 이는 두 번째 작업이 그 조건에서만 실행되어야 할 때 유용하지만, 여러 이벤트 리스너를 등록하지는 않습니다.

function isValidPage(pageNumber) {
  return Number.isInteger(pageNumber) && pageNumber >= 1 && pageNumber <= 10;
}

function fetchPageDetails(pageNumber) {
  console.log(`Loading page ${pageNumber}`);
}

const pageNumber = 3;
isValidPage(pageNumber) && fetchPageDetails(pageNumber);

여기서 fetchPageDetails는 isValidPage가 참인 값을 반환할 때만 실행됩니다. ||를 사용하면 첫 번째 식이 거짓일 때 대체 호출이 실행될 수 있습니다. 예를 들어 hasSavedValue() || loadDefaultValue()입니다. 의도적인 조건부 실행에는 &&와 ||를 사용하고, 등록된 모든 콜백이 클릭에 응답해야 할 때는 별도의 리스너를 사용하세요.