๋ง์ฐ์ค ์ด๋ฒคํธ ์ข
๋ฅ๋ ๋ค์๊ณผ ๊ฐ๋ค.
JavaScript event reference: MDN ์์ ๋ ๋ง์ ์ด๋ฒคํธ ๋ฆฌ์คํธ๋ฅผ ๋ณผ ์ ์๋ค.
const alertH1 = function (e) {
alert("addEventListener1: you are reading the heading");
};
// h1์ mouse enter ์ผ ๋ alertH1 ์คํ
const h1 = document.querySelector("h1");
h1.addEventListener("mouseenter", alertH1);
// 5์ด ํ alertH1 ์ญ์
setTimeout(() => h1.removeEventListener("mouseenter", alertH1), 5000);
// old way! ๊ณผ๊ฑฐ ๋ฐฉ๋ฒ์ ์ฌ์ฉ x (onclick ๋ฑ๋ฑ)
// h1.onmouseenter = function (e) {
// alert("addEventListener2: you are reading the heading");
// };
๐ฅ ์ addEventListener๋ฅผ ๋ ๋ง์ด ์ฐ๋๊ฐ?
1) We can add multiple event listners to the same event (old way will override the 1st function.)
2) We can remove an event handler in case we don't need it anymore.