AddEventListener 인자 - addEventListener inja

구문

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

매개변수

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

수신할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

지정한 이벤트(

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

이벤트 수신기의 특징을 지정할 수 있는 객체입니다. 가능한 옵션은 다음과 같습니다.

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

이벤트 대상의 DOM 트리 하위에 위치한 자손

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

수신기가 최대 한 번만 동작해야 함을 나타내는 불리언 값입니다.

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

이벤트 대상의 DOM 트리 하위에 위치한 자손

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

참고: 이벤트의 대상에 부착된 수신기의 경우 캡처링도, 버블링 단계도 아닌 별도의 단계에 발동합니다. 캡처 모드의 수신기는 캡처 모드가 아닌 다른 모든 수신기보다 앞서 발동합니다.

// 표에 중단 가능한 수신기 추가
const controller = new AbortController();
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, { signal: controller.signal } );

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
    controller.abort(); // 값이 "three"가 되면 수신기 제거
  }
}

Firefox(Gecko)에서만 사용할 수 있습니다.

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

반환 값

없음 (

// 표에 중단 가능한 수신기 추가
const controller = new AbortController();
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, { signal: controller.signal } );

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
    controller.abort(); // 값이 "three"가 되면 수신기 제거
  }
}

사용 일람

이벤트 수신기 콜백

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

콜백 함수 자체는

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

다음은

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

옵션 지원을 안전하게 감지하기

과거 DOM 명세에선

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

구형 브라우저에서는 (그리고 일부 상대적으로 덜 오래된 브라우저에서도) 여전히 세 번째 매개변수에 오로지 불리언 값만 기대하고 있으므로 브라우저간 차이점을 처리할 수 있는 코드를 작성할 필요가 있습니다. 필요한 옵션에 대한 기능 감지 코드를 사용하세요.

예를 들어,

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

위의 코드는

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
                               ? { passive: true } : false);

// t2의 콘텐츠를 바꾸는 함수
function modifyText(new_text) {
  const t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", function(){modifyText("four")}, false);

이 방법으로 모든 옵션에 대한 지원 여부를 확인할 수 있습니다. 위 코드와 비슷하게, 확인하려는 옵션에 대한 접근자를 추가하기만 하면 됩니다.

그 후, 실제로 플래그를 사용할 땐 아래와 같이 할 수 있습니다.

someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
                               ? { passive: true } : false);

위 코드에서는 {domxref("Element/mouseup_event", "mouseup")}} 이벤트에 대한 수신기를

// t2의 콘텐츠를 바꾸는 함수
function modifyText(new_text) {
  const t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", function(){modifyText("four")}, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

직접 알아내는 대신 Modernizr나 Detect It 등 서드파티 라이브러리를 사용해 기능 감지를 할 수도 있습니다.

Web Incubator Community Group의

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

예제

간단한 수신기 추가하기

이 예제는

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

HTML

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

JavaScript

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

위 코드의

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

결과

중단 가능한 수신기 추가하기

이 예제는

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

HTML

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

JavaScript

// 표에 중단 가능한 수신기 추가
const controller = new AbortController();
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, { signal: controller.signal } );

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
    controller.abort(); // 값이 "three"가 되면 수신기 제거
  }
}

이 예제는 앞선 첫 번째 예제를 수정해서, 표의 두 번째 행 내용이 "three"가 되면

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

결과

익명 함수와 이벤트 수신기

여기선 익명 함수를 사용해 이벤트 수신기에 매개변수를 지정하는 방법을 보입니다.

HTML

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

JavaScript

// t2의 콘텐츠를 바꾸는 함수
function modifyText(new_text) {
  const t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", function(){modifyText("four")}, false);

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

결과

화살표 함수와 이벤트 수신기

이 예제는 화살표 함수를 사용해서 간단한 이벤트 수신기를 구현하는 모습을 보입니다.

HTML

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

JavaScript

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

결과

화살표 함수와 익명 함수는 비슷하지만,

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

따라서 화살표 함수를 포함한 함수의 변수와 상수를 이벤트 처리 코드에서도 사용할 수 있습니다.

옵션 객체 사용하기

HTML

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

CSS

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

JavaScript

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

결과

바깥과 중간, 내부 컨테이너를 반복해서 클릭해 각각의 옵션이 어떻게 동작하는지 확인해보세요.

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

기타 일람

이벤트 수신기 내부의 this 값

비슷한 요소 다수의 이벤트를 모두 처리할 수 있는 범용 수신기를 정의하는 경우, 부착된 요소의 참조를 가져와야 하는 상황이 종종 발생합니다.

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

다만 화살표 함수는 스스로의

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

HTML 소스 코드에서 (

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

참고로 이벤트 수신기 특성 안에서 호출한 함수의

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
                               ? { passive: true } : false);

// 표에 중단 가능한 수신기 추가
const controller = new AbortController();
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, { signal: controller.signal } );

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
    controller.abort(); // 값이 "three"가 되면 수신기 제거
  }
}

bind()로 this 설정하기

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

다음은

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

다른 방법으로는

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

이벤트 수신기 안팎으로 데이터 옮기기

이벤트 수신기에 데이터를 제공하는 것은 물론, 수신기 실행이 끝난 후 결과를 가져오는 것 또한 매우 어려워보일 것입니다. 이벤트 수신기는 유일한 매개변수로 이벤트 객체만 받으며, 반환하는 모든 값은 무시됩니다. 그러면 어떻게 수신기에 데이터를 전달하거나, 그 밖으로 데이터를 가져올 수 있을까요? 몇 가지 좋은 방법을 소개합니다.

this로 이벤트 수신기에 데이터 전달하기

위에서 언급했듯,

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

이 방법은 수신기가 발동된 대상을 알 필요가 없을 때 적합하며, 매개변수를 통해 값을 제공하는 것과 크게 다르지 않은 방법을 제공한다는 점이 장점입니다.

바깥 스코프 속성으로 이벤트 수신기에 데이터 전달하기

바깥 스코프에서

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

참고: 내부 스코프에서 바깥 스코프의

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

객체를 사용해 이벤트 수신기 안팎으로 데이터 전달하기

자신을 참조하는 변수가 메모리에 남아있는 한, 객체는 메모리에서 사라지지 않습니다. 이 성질에 더해, 객체는 속성을 갖는다는 점, 그리고 참조로 전달된다는 점을 활용하면 스코프 안팎에서 데이터를 교환하는 창구로 객체를 이용할 수 있습니다.

참고: JavaScript에서는 함수도 사실 객체입니다. 따라서 함수도 속성을 가질 수 있고, 메모리에 유지되는 변수에 할당한 경우 실행 후에도 메모리에서 해제되지 않습니다.

객체를 참조하는 변수가 메모리에 존재하는 한 객체 속성을 사용해 메모리에 데이터를 저장할 수 있으니, 이벤트 수신기 내부로 데이터를 전달할 때도 사용할 수 있고, 이벤트 처리기 실행이 끝난 후 변화된 데이터를 가져와야 할 때도 사용할 수 있습니다. 아래 코드를 살펴보세요.

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

위 예제를 보면, 이벤트 수신기와 인터벌 함수가 정의된 스코프는

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

참고: 객체는 변수에 참조, 실제 데이터가 저장된 메모리의 주소로 할당됩니다. 이 말은 곧, 객체를 담고 있는 변수를 사용하면, 같은 객체를 담은 다른 변수에도 영향을 줄 수 있다는 뜻입니다. 두 개의 변수가 같은 객체를 참조(e.g.

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

참고: 객체는 변수에 참조로 저장되기 때문에, 함수에서 객체를 반환하면 함수가 종료된 이후에도 계속 지속(데이터를 잃지 않도록 메모리에 유지)시킬 수 있습니다.

메모리 문제

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

위 코드에서 상황 1의 경우에는 반복문의 매 반복마다 새로운 익명 처리기 함수가 생성됩니다. 반면 상황 2에서는 사전에 정의한 함수를 이벤트 처리기로 사용하므로 처리기 함수를 하나만 사용하고, 따라서 더 작은 메모리 공간만 사용합니다. 더군다나 상황 1에서는, 익명 함수에 대한 참조를 유지하지 않으므로

someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
                               ? { passive: true } : false);

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

사실, 메모리 소비와 관련하여, 함수 참조를 유지하지 못하는 것은 중요한 문제가 아닙니다. 진짜 문제는 함수 참조를 '정적으로' 유지하지 못하는 것입니다. 이 점을 보여주는 아래의 상황 3과 상황 4에서는 함수 참조를 유지하긴 하지만, 매 반복마다 재정의됩니다. 상황 3에서는 반복할 때마다 익명 함수에 대한 참조를 재할당하고, 상황 4에서는 함수 전체 정의는 변하지 않지만 매번 마치 새로운 함수처럼 반복적으로 재정의되므로 두 상황 모두 정적이지 않습니다. 따라서 코드를 보기엔 다수의 동일한 이벤트 수신기처럼 보이지만, 사실 각 반복마다 새로운 처리기를 참조하는 새로운 이벤트 수신기를 생성하고 있는 것입니다.

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

또한 상황 3과 4에서는 함수 참조가 유지되긴 하지만 매번

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

패시브 수신기로 스크롤 성능 향상

명세에 따르면,

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

이 문제를 방지하기 위해 일부 브라우저(Chrome과 Firefox 등)는 문서 레벨 노드인

someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
                               ? { passive: true } : false);

someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
                               ? { passive: true } : false);

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* 전체화면 여부 변화 처리 */
  } else /* fullscreenerror */ {
    /* 전체화면 오류 처리 */
  }
}

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

참고: 어떤 브라우저/버전에서 이렇게 동작하는지는 아래의 브라우저 호환성 표에 나와있습니다.

// t2의 콘텐츠를 바꾸는 함수
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

let passiveSupported = false;

try {
  const options = {
    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
      passiveSupported = true;
      return false;
    }
  };

  window.addEventListener("test", null, options);
  window.removeEventListener("test", null, options);
} catch(err) {
  passiveSupported = false;
}

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>

<table id="outside">
  <tr><td id="t1">one</td></tr>
  <tr><td id="t2">two</td></tr>
</table>