EventTarget.addEventListener()

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

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

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,
);

<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>

// 표에 중단 가능한 수신기 추가
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"가 되면 수신기 제거
  }
}

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

// 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(new_text) {
  const t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = new_text;
}

// 화살표 함수를 사용한 이벤트 수신기를 표에 추가
const el = document.getElementById("outside");
el.addEventListener(
  "click",
  () => {
    modifyText("four");
  },
  false,
);

<div class="outer">
  바깥, 일회용 & 다회용
  <div class="middle" target="_blank">
    중간, 캡처 & 비 캡처
    <a class="inner1" href="https://www.mozilla.org" target="_blank">
      내부 1, 패시브 & (허용되지 않은) preventDefault
    </a>
    <a class="inner2" href="https://developer.mozilla.org/" target="_blank">
      내부 2, 비 패시브 & preventDefault (새 페이지가 열리지 않음)
    </a>
  </div>
</div>

.outer,
.middle,
.inner1,
.inner2 {
  display: block;
  width: 520px;
  padding: 15px;
  margin: 15px;
  text-decoration: none;
}
.outer {
  border: 1px solid red;
  color: red;
}
.middle {
  border: 1px solid green;
  color: green;
  width: 460px;
}
.inner1,
.inner2 {
  border: 1px solid purple;
  color: purple;
  width: 400px;
}

const outer = document.querySelector(".outer");
const middle = document.querySelector(".middle");
const inner1 = document.querySelector(".inner1");
const inner2 = document.querySelector(".inner2");

const capture = {
  capture: true,
};
const noneCapture = {
  capture: false,
};
const once = {
  once: true,
};
const noneOnce = {
  once: false,
};
const passive = {
  passive: true,
};
const nonePassive = {
  passive: false,
};

outer.addEventListener("click", onceHandler, once);
outer.addEventListener("click", noneOnceHandler, noneOnce);
middle.addEventListener("click", captureHandler, capture);
middle.addEventListener("click", noneCaptureHandler, noneCapture);
inner1.addEventListener("click", passiveHandler, passive);
inner2.addEventListener("click", nonePassiveHandler, nonePassive);

function onceHandler(event) {
  alert("바깥, 일회용");
}
function noneOnceHandler(event) {
  alert("바깥, 다회용, 기본 값");
}
function captureHandler(event) {
  //event.stopImmediatePropagation();
  alert("중간, 캡처");
}
function noneCaptureHandler(event) {
  alert("중간, 비 캡처, 기본 값");
}
function passiveHandler(event) {
  // 패시브 수신기 내에서는 preventDefault 사용 불가
  event.preventDefault();
  alert("내부 1, 패시브, 새 페이지 열림");
}
function nonePassiveHandler(event) {
  event.preventDefault();
  //event.stopPropagation();
  alert("내부 2, 비 패시브, 기본 값, 새 페이지 열림");
}

my_element.addEventListener("click", function (e) {
  console.log(this.className); // my_element의 className 기록
  console.log(e.currentTarget === this); // `true` 기록
});

my_element.addEventListener("click", (e) => {
  console.log(this.className); // 경고: `this`가 `my_element`가 아님
  console.log(e.currentTarget === this); // `false` 기록
});

<table id="my_table" onclick="console.log(this.id);">
  <!-- `this`가 표를 가리키므로 'my_table'을 기록함 -->
  ...
</table>

<script>
  function logID() {
    console.log(this.id);
  }
</script>
<table id="my_table" onclick="logID();">
  <!-- 호출 시, logID의 `this`는 전역 객체를 가리키게 됨 -->
  ...
</table>

const Something = function (element) {
  // this는 Something 인스턴스
  this.name = "Something Good";
  this.onclick1 = function (event) {
    console.log(this.name); // undefined, this는 element임
  };

  this.onclick2 = function (event) {
    console.log(this.name); // 'Something Good', this는 Something 인스턴스
  };

  // bind가 onclick2의 this 맥락을 고정함
  this.onclick2 = this.onclick2.bind(this);

  element.addEventListener("click", this.onclick1, false);
  element.addEventListener("click", this.onclick2, false);
};
const s = new Something(document.body);

const Something = function (element) {
  // this는 Something 인스턴스
  this.name = "Something Good";
  this.handleEvent = function (event) {
    console.log(this.name); // 'Something Good', this는 Something 인스턴스로 바인딩 됨
    switch (event.type) {
      case "click":
        // 다른 코드...
        break;
      case "dblclick":
        // 다른 코드...
        break;
    }
  };

  // 수신기 매개변수가 this.handleEvent가 아니라 this인 것에 주의
  element.addEventListener("click", this, false);
  element.addEventListener("dblclick", this, false);

  // 수신기 제거도 가능
  element.removeEventListener("click", this, false);
  element.removeEventListener("dblclick", this, false);
};
const s = new Something(document.body);

class SomeClass {
  constructor() {
    this.name = "Something Good";
  }

  register() {
    const that = this;
    window.addEventListener("keydown", function (e) {
      that.someMethod(e);
    });
  }

  someMethod(e) {
    console.log(this.name);
    switch (e.keyCode) {
      case 5:
        // 다른 코드...
        break;
      case 6:
        // 다른 코드...
        break;
    }
  }
}

const myObject = new SomeClass();
myObject.register();

const myButton = document.getElementById("my-button-id");
const someString = "Data";

myButton.addEventListener(
  "click",
  function () {
    console.log(this); // 예상 값: 'Data'
  }.bind(someString),
);

const myButton = document.getElementById("my-button-id");
let someString = "Data";

myButton.addEventListener("click", function () {
  console.log(someString); // 예상 값: 'Data'

  someString = "Data Again";
});

console.log(someString); // 예상 값: 'Data' ('Data Again'을 출력하지 않음)

const myButton = document.getElementById("my-button-id");
const someObject = { aProperty: "Data" };

myButton.addEventListener("click", function () {
  console.log(someObject.aProperty); // 예상 값: 'Data'

  someObject.aProperty = "Data Again"; // 값 변경
});

window.setInterval(function () {
  if (someObject.aProperty === "Data Again") {
    console.log("Data Again: True");
    someObject.aProperty = "Data"; // 다음 이벤트 실행을 기다리기 위해 값 초기화
  }
}, 5000);

const els = document.getElementsByTagName("*");

// 상황 1
for (let i = 0; i < els.length; i++) {
  els[i].addEventListener(
    "click",
    function (e) {
      /*do something*/
    },
    false,
  );
}

// 상황 2
function processEvent(e) {
  /* do something */
}

for (let i = 0; i < els.length; i++) {
  els[i].addEventListener("click", processEvent, false);
}

const els = document.getElementsByTagName("*");

function processEvent(e) {
  /* do something */
}

// 시연을 위해 [i] 대신 [j]를 사용하는 실수를 한 것에 주의하세요. 반복문 내에서 정의한 수신기를 모두 첫 요소에 등록하고 있습니다.

// 상황 3
for (let i = 0, j = 0; i < els.length; i++) {
  els[j].addEventListener(
    "click",
    (processEvent = function (e) {
      /* do something */
    }),
    false,
  );
}

// 상황 4
for (let i = 0, j = 0; i < els.length; i++) {
  function processEvent(e) {
    /* do something */
  }
  els[j].addEventListener("click", processEvent, false);
}

/* 기능 감지 */
let passiveIfSupported = false;

try {
  window.addEventListener(
    "test",
    null,
    Object.defineProperty({}, "passive", {
      get: function () {
        passiveIfSupported = { passive: true };
      },
    }),
  );
} catch (err) {}

window.addEventListener(
  "scroll",
  function (event) {
    /* do something */
    // event.preventDefault() 사용 불가
  },
  passiveIfSupported,
);