[Javascript] Event (Add, Remove)

CloudCoke

|2022. 11. 9. 23:13

Event란?

Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.
이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자의 액션에 의해 발생할 수도 있고, 비동기적 작업의 진행을 나타내기 위해서 API가 생성할 수도 있습니다. Event - MDN

이벤트(Event)란 우리가 브라우저에서 버튼을 클릭하거나 로그인을 하기 위해 ID/PW를 입력하는 행동이라고 볼 수 있다.

버튼을 클릭하면 브라우저에 click 이벤트가 발생하고 ID/PW를 입력할 때 브라우저에서 keyup이나 keydown등의 이벤트가 발생한다.

Event Handling

브라우저에서 발생되는 이벤트를 처리하는 걸 이벤트 핸들링이라고 부른다. 이벤트 핸들링을 하는 방법이 3가지 정도 있는데 한 번 알아보자!

1. Element에 직접 넣기

이 방법은 html에 요소에 style 속성을 넣는 것 처럼 이벤트도 넣을 수 있다.

이 방법을 사용하는 대부분의 이벤트이름에는 앞 글자에 on이라는 게 붙어 있다.

on[Event 이름] = "동작"

  <body>
    <button onclick="alert('hello world!')">버튼</button>
  </body>

위와 같이 코드를 작성하고 실행해 보자!

버튼이 클릭되면 hello world!라는 텍스트를 출력하는 경고창이 뜨게 된다.

이 방법은 잘 사용하지 않는다. 간단한 코드일 경우에는 괜찮지만 코드가 복잡해지면 HTML 파일의 가독성이 떨어지게 된다.

2. DOM 속성으로 넣기

이 방법은 Element에 직접 넣어서 HTML 파일의 가독성을 해치는 단점을 해결해 준다. 이 방법은 HTML 파일과 자바스크립트 파일로 나눠서 작성해야 한다.

<body>
    <button class="btn">버튼</button>
    <script src="public/js/practice.js"></script>
  </body>

const btn = document.querySelector(".btn");

btn.onclick = function () { // 이벤트 핸들러(Event Handler)
  console.log("hello world!");
};

1. querySelector로 .btn이라는 클래스 이름을 선택하면 만족하는 첫 번째 요소(Element) 객체를 반환해 준다. (참조 형태)

2. 요소 객체를 btn이라는 변수에 대입해준 다음 onclick이라는 속성에 함수를 넣어준다. 구체적으로 어떤 동작을 할 지 명시해주는 함수 부분을 이벤트 핸들러라고 부른다.

정말 querySelector로 존재하는 선택자를 선택했을 때 반환되는 Element가 참조형태일까?

const btn = document.querySelector(".btn");

btn.onclick = function () {
  console.log("hello world!");
};

console.log(btn.onclick);

const btn2 = document.querySelector(".btn");

btn2.onclick = function () {
  console.log("update onclick");
};

console.log(btn.onclick);
console.log(btn.onclick === btn2.onclick); // true

이 코드를 실행해 보면 btn2의 onclick 속성을 수정해 주었는데 btn의 onclick 속성까지 변경이 되었다.

따라서 querySelector는 Element를 참조형으로 반환한다고 볼 수 있다.

위 코드를 실행한 결과 querySelector는 Element를 참조 형태로 반환해 준다.

DOM 속성으로 이벤트 핸들링을 하는 방법에도 치명적인 단점이 있다.

하나의 이벤트에 여러 이벤트 핸들러를 등록할 수 없다는 점이다.

const btn = document.querySelector(".btn");

btn.onclick = function () {
  console.log("hello world!");
};

console.log(btn.onclick);

btn.onclick = function () {
  console.log("hello world!2");
};

console.log(btn.onclick);

이 방법에는 기존의 값을 유지할 수 없다는 단점이 있다.

3. addEventListener

이 방법은 DOM 속성으로 이벤트 핸들링을 할 때 여러 핸들러를 등록하지 못하는 단점을 해결해 준다.

문법은 다음과 같다.

Element.addEventLitener("event_name", callback_function_value, [options]);

addEventListener를 이용해 이벤트를 등록하는 방법은 함수를 직접 넣어주는 방법과 함수를 선언하고 넣어주는 방법이 있다. 하나씩 살펴보자!

<body>
    <button class="btn">버튼</button>
    <script src="public/js/practice.js"></script>
  </body>

방법 1 - 익명함수를 이용해 함수를 직접 넣어주기

const btn = document.querySelector(".btn");

console.log("익명함수를 이용해 함수를 직접 넣어주기")
btn.addEventListener("click", function () {
  console.log("hello world!");
});

btn.addEventListener("click", function () {
  console.log("hello world2!");
});

방법 2 - 함수를 선언하고 넣어주기 [권장]

const btn = document.querySelector(".btn");

console.log("함수를 선언하고 넣어주기");
const btnHandler = function () {
  console.log("hello world!");
};

const btnHandler2 = function () {
  console.log("hello world2!");
};

btn.addEventListener("click", btnHandler);
btn.addEventListener("click", btnHandler2);

둘 다 같은 결과가 나오지만 익명함수를 이용해 함수를 직접 넣어주는 방식으로 이벤트를 등록하게 되면 이벤트를 삭제할 때 문제가 발생한다. (이벤트를 등록할 때는 함수 표현식이나 함수 선언식으로 등록을 하자!)

Event Remove

addEventListener를 이용해 등록한 이벤트를 제거하는 방법은 다음과 같다. 삭제하고 싶은 이벤트가 있다면 등록했을 때와 동일하게 인자를 removeEventListener에 넣어주면 된다.

Element.removeEventListener("event_name", callback_function_value);

먼저 [방법 1 - 익명함수를 이용해 함수를 직접 넣어주기]에서 등록한 이벤트를 제거해 보자.

const btn = document.querySelector(".btn");

console.log("익명함수를 이용해 함수를 직접 넣은 이벤트 제거");
btn.addEventListener("click", function () {
  console.log("hello world!");
});

btn.addEventListener("click", function () {
  console.log("hello world2!");
});

btn.removeEventListener("click", function () {
  console.log("hello world!");
});

hello world를 출력하는 이벤트가 지워지지 않았다. 이유는 간단하다.

두 함수는 같지 않기 때문이다. 그래서 removeListener가 삭제하려고 해도 다른 함수이기 때문에 정상적으로 삭제가 되지 않는 것이다. 그래서 [방법 2 - 함수를 선언하고 넣어주기]로 이벤트를 등록하는걸 권장한다.

그러면 [방법 2 - 함수를 선언하고 넣어주기]로 등록한 이벤트를 제거해 보자!

const btn = document.querySelector(".btn");

console.log("함수를 선언하고 넣어준 이벤트 제거");
const btnHandler = function () {
  console.log("hello world!");
};

const btnHandler2 = function () {
  console.log("hello world2!");
};

btn.addEventListener("click", btnHandler);
btn.addEventListener("click", btnHandler2);

btn.removeEventListener("click", btnHandler);

이번에는 정상적으로 hello world를 출력하는 이벤트가 제거가 되었다.

⚠️Warning⚠️
addEvnetListener를 등록할 때 두 번째 파라미터로 callback 함수를 받게 된다.
주의해야 할 점은 callback 함수를 호출하는게 아니라 함수 값 자체를 넣어 주어야 한다는 점이다.

다음과 같은 코드를 실행해 보자!

const btn = document.querySelector(".btn");

const event1 = function () {
  console.log("hello world!");
};
const event2 = function () {
  console.log("hello world2!");
};

btn.addEventListener("click", event1);
btn.addEventListener("click", event2());

addEventListener 인자에 callback 함수를 호출한 결과

페이지가 로드되면 event2함수가 동작하고 버튼을 클릭하면 이벤트가 even1만 등록이 되어있다. 인자에 함수를 호출하는 코드를 넣었기 때문에 제대로 이벤트가 등록되지 않았기 때문이다. 이 부분을 잘 기억해 두자!

마무리

오늘은 이벤트를 등록하고 제거하는 방법을 알아보았다. 이벤트를 등록할 때 콜백 함수 값을 넣어야 하는데 콜백 함수를 호출하는 경우가 없도록 주의하자!

'Javascript' 카테고리의 다른 글

[Javascript] Script 태그 위치 (0)	2022.11.11
[Javascript] Event Object (0)	2022.11.10
[Javascript] 로또 번호 생성기 (0)	2022.11.08
[Javascript] DOM(Document Object Model) (0)	2022.11.08
[Javascript] 객체 (0)	2022.11.04